/* ════════════════════════════════════════════════════════ MR. GENTLEMAN CRETE — BASE STYLESHEET File: assets/css/base.css Source design: mrgentleman.gr css/style.css + css/about.css (hero) Changes vs. the design (step 1, approved "optimize readability"): · body text, eyebrows, labels and footer text slightly larger + brighter · fonts self-hosted (no Google Fonts request) · hero background is a real responsive (faster LCP), same look · header menu with dropdowns (Services, Locations) Lines marked ← are the values you are most likely to tweak. ════════════════════════════════════════════════════════ */ /* ── FONTS (self-hosted, latin subset, SIL Open Font License) ── */ @font-face { font-family:'Pinyon Script'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/pinyon-script-latin-400-normal.woff2') format('woff2'); } @font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:300; font-display:swap; src:url('../fonts/cormorant-garamond-latin-300-normal.woff2') format('woff2'); } @font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2'); } @font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2'); } @font-face { font-family:'Cormorant Garamond'; font-style:italic; font-weight:300; font-display:swap; src:url('../fonts/cormorant-garamond-latin-300-italic.woff2') format('woff2'); } @font-face { font-family:'Cormorant Garamond'; font-style:italic; font-weight:400; font-display:swap; src:url('../fonts/cormorant-garamond-latin-400-italic.woff2') format('woff2'); } @font-face { font-family:'Jost'; font-style:normal; font-weight:300; font-display:swap; src:url('../fonts/jost-latin-300-normal.woff2') format('woff2'); } @font-face { font-family:'Jost'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/jost-latin-400-normal.woff2') format('woff2'); } /* ════════════════════════════════════════════════════════ VARIABLES — edit here to change colours globally ════════════════════════════════════════════════════════ */ :root { --bg: #1A202C; /* ← page background */ --bg2: #202834; /* ← card/button background */ --bg3: #252f3e; /* ← hover background */ --gold: #c9a84c; /* ← primary gold */ --gold-light: #e4c97b; /* ← bright gold — titles, active borders */ --gold-dim: #a8874a; /* ← eyebrows, subtitles (design: #8a6d2f — brightened for readability) */ --gold-pale: rgba(201,168,76,0.12); --blue: #4A9EE0; /* ← accent blue — links, button glow */ --border: rgba(201,168,76,0.18); --border-soft: rgba(255,255,255,0.06); --text: #f0ede8; /* ← primary text */ --text-muted: #b5b0a6; /* ← body text (design: #8a8880 — brightened for readability) */ --text-faint: #8d8980; /* ← small print (design: #4a4845 — brightened for readability) */ --transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); --ornament-space: 10rem; /* ← SPACE ABOVE + BELOW THE 5-STAR DIVIDER (everywhere) */ --font-script: 'Pinyon Script', cursive; --font-serif: 'Cormorant Garamond', Georgia, serif; --font-sans: 'Jost', 'Helvetica Neue', Arial, sans-serif; } /* ── RESET ── */ *, *::before, *::after { box-sizing:border-box; margin:0; padding:0; } html { scroll-behavior:smooth; overflow-x:clip; -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-padding-top:110px; } /* anchors land below the sticky header */ body { background: var(--bg); color: var(--text); font-family: var(--font-serif); font-weight: 400; font-size: 1rem; line-height: 1.8; overflow-x: clip; -webkit-font-smoothing: antialiased; } img, svg { display:block; max-width:100%; } button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *, *::before, *::after { transition:none !important; animation:none !important; } } .skip-link { position:absolute; left:-9999px; top:0; z-index:100000; background:var(--bg2); color:var(--gold-light); padding:0.6rem 1rem; border:1px solid var(--gold); } .skip-link:focus { left:1rem; top:1rem; } :focus-visible { outline:1px solid var(--gold-light); outline-offset:3px; } /* ════════════════════════════════════════════════════════ TYPOGRAPHY ════════════════════════════════════════════════════════ */ h1 { font-family: var(--font-script); font-size: clamp(3rem, 6vw, 5.2rem); /* ← H1 SIZE */ font-weight: 400; color: var(--gold-light); line-height: 1.15; letter-spacing: 0.02em; margin-bottom: 1.6rem; text-shadow: 0 0 2px rgba(0,0,0,0.95), 0 0 8px rgba(0,0,0,0.85), 1px 1px 0 rgba(0,0,0,0.8), -1px -1px 0 rgba(0,0,0,0.8), 1px -1px 0 rgba(0,0,0,0.8), -1px 1px 0 rgba(0,0,0,0.8), 0 4px 18px rgba(0,0,0,0.5); } h2.section-title { font-family: var(--font-script); font-size: clamp(2.4rem, 4vw, 3.6rem); /* ← H2 SIZE */ font-weight: 400; line-height: 1.27; letter-spacing: 0.02em; margin-bottom: 1.4rem; background: linear-gradient(110deg, #ffffff 0%, #c8d8f0 40%, var(--blue) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: inline-block; position: relative; padding: 0 0.14em; margin-left: -0.14em; margin-right: -0.14em; /* room for script swashes: no clipped letters */ } h2.gold-title, h3.gold-title { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 1.7rem; /* ← CARD TITLE SIZE */ line-height: 1.2; margin-bottom: 0.75rem; color: var(--gold-light); -webkit-text-fill-color: var(--gold-light); background: none; } h3 { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 1.5rem; /* ← H3 SIZE (design 1.4rem) */ color: var(--gold-light); margin-bottom: 0.75rem; line-height: 1.25; } h4 { font-family: var(--font-serif); font-style: italic; font-size: 1.15rem; color: var(--text); margin-bottom: 1.3rem; letter-spacing: 0.03em; font-weight:400; } .lead { font-family: var(--font-serif); font-size: 1.25rem; /* ← LEAD SIZE (design 1.18rem) */ font-weight: 400; color: var(--text-muted); line-height: 1.8; margin-bottom: 1.4rem; } p { font-family: var(--font-serif); font-size: 1.15rem; /* ← BODY SIZE (design 1.08rem) */ color: var(--text-muted); margin-bottom: 1.2rem; font-weight: 400; /* ← BODY WEIGHT (design 300) */ line-height: 1.85; letter-spacing: 0.01em; } p:last-child { margin-bottom: 0; } strong { font-weight:500; color:var(--text); } blockquote { border-left: 2px solid var(--gold-dim); padding: 1rem 1.5rem; margin: 1.5rem 0; font-style: italic; color: var(--text-muted); font-size: 1.15rem; } ul.styled-list, ol.styled-list { padding-left: 1.4rem; color: var(--text-muted); font-size: 1.12rem; line-height: 2; } ul.styled-list li::marker { color: var(--gold-dim); } /* ════════════════════════════════════════════════════════ LINKS ════════════════════════════════════════════════════════ */ a { color: var(--blue); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--gold-light); } .text-link { font-family: var(--font-script); font-size: 1.3em; color: var(--gold-light); border-bottom: 1px solid rgba(228,201,123,0.35); padding-bottom: 1px; font-weight: 400; line-height: 1; vertical-align: baseline; transition: border-color var(--transition), color var(--transition); } .text-link:hover { color: var(--gold); border-bottom-color: var(--gold); } .gold-text { font-family: var(--font-script); font-size: 1.3em; color: var(--gold-light); font-weight: 400; line-height: 1.2; vertical-align: baseline; } /* ════════════════════════════════════════════════════════ EYEBROW LABELS + FADING GOLD LINES ════════════════════════════════════════════════════════ */ .eyebrow-wrap { display:flex; align-items:center; gap:10px; margin-bottom:1rem; overflow:hidden; } .eyebrow-wrap.centered { justify-content:center; } .eyebrow { font-family: var(--font-serif); font-size: 0.8rem; /* ← EYEBROW SIZE (design 0.72rem) */ letter-spacing: 0.36em; text-transform: uppercase; color: var(--gold-dim); font-weight: 500; white-space: nowrap; flex-shrink: 0; } .eyebrow-line { flex:1; height:1px; max-width:200px; background:linear-gradient(to right, rgba(201,168,76,0.55), rgba(201,168,76,0.2) 60%, transparent); } .eyebrow-line-left { flex:1; height:1px; max-width:120px; background:linear-gradient(to left, rgba(201,168,76,0.55), rgba(201,168,76,0.15) 70%, transparent); } .eyebrow-line-right { flex:1; height:1px; max-width:120px; background:linear-gradient(to right, rgba(201,168,76,0.55), rgba(201,168,76,0.15) 70%, transparent); } /* ════════════════════════════════════════════════════════ BUTTONS ════════════════════════════════════════════════════════ */ .btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: rgba(20,26,38,0.97); border: 1px solid rgba(201,168,76,0.55); padding: 13px 28px; border-radius: 2px; cursor: pointer; position: relative; overflow: hidden; user-select: none; transition: border-color var(--transition), background var(--transition), box-shadow var(--transition); margin-top: 2.6rem; text-decoration: none; /* ← SPACE ABOVE BUTTONS (hero buttons: 1.6rem, see home.css) */ min-width: 160px; } .btn::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 0%, rgba(201,168,76,0.1), transparent 68%); pointer-events:none; z-index:0; } .btn::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 0%, rgba(74,158,224,0.2), transparent 72%); opacity:0; pointer-events:none; transition:opacity var(--transition); z-index:1; } .btn:hover { border-color:var(--gold-light); background:rgba(30,38,54,0.98); box-shadow:0 0 16px rgba(201,168,76,0.28), 0 0 6px rgba(74,158,224,0.15), inset 0 1px 0 rgba(201,168,76,0.12); } .btn:hover::before { opacity:1; } .btn-label { display: block; font-family: var(--font-serif); font-size: 1.2rem; /* ← BUTTON LABEL SIZE (design 1.15rem) */ font-weight: 400; color: var(--text); letter-spacing: 0.03em; transition: color var(--transition); position: relative; z-index: 2; } .btn:hover .btn-label { color: var(--gold-light); } .btn-sub { display: block; font-family: var(--font-sans); font-size: 0.7rem; /* ← BUTTON SUBTITLE SIZE (design 0.65rem) */ font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-dim); margin-top: 3px; transition: color var(--transition); position: relative; z-index: 2; } .btn:hover .btn-sub { color: var(--gold); } .btn--full { width:100%; margin-top:1rem; } .btn-row { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; } .btn-row .btn { margin-top:2.2rem; } .btn--leave { border-color:rgba(255,255,255,0.18); } .btn--leave .btn-label { color:var(--text-muted); } .btn--leave .btn-sub { color:var(--text-faint); } .btn--leave:hover { border-color:rgba(255,255,255,0.35); box-shadow:none; } .btn--leave:hover .btn-label { color:var(--text); } /* ════════════════════════════════════════════════════════ LAYOUT ════════════════════════════════════════════════════════ */ .container { width:90%; max-width:1500px; margin:0 auto; } .container--narrow { width:90%; max-width:1200px; margin:0 auto; } .container--hf { width:90%; max-width:1300px; margin:0 auto; } /* ← HEADER & FOOTER WIDTH (design 1100px, wider for the longer menu) */ section { position:relative; } .split { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; } /* ════════════════════════════════════════════════════════ HEADER + MENU ════════════════════════════════════════════════════════ */ /* Sticky bar: transparent over the hero, dark + blurred after scrolling (.is-scrolled via main.js) */ .header-bar { position: fixed; top:0; left:0; right:0; z-index:1000; transition: background var(--transition), box-shadow var(--transition), backdrop-filter var(--transition); } .header-bar.is-scrolled { background: rgba(18,22,32,0.94); /* ← STICKY HEADER BG */ backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 8px 30px rgba(0,0,0,0.45); } .site-header { position: relative; margin: 0 auto; width: 90%; max-width: 1300px; /* ← HEADER WIDTH — matches footer */ padding: 2.2rem 0 1.4rem; display: flex; justify-content: space-between; align-items: center; gap:2rem; transition: padding var(--transition); } .header-bar.is-scrolled .site-header { padding: 0.85rem 0 0.75rem; } .header-bar.is-scrolled .brand-name { font-size: 2rem; } .header-bar.is-scrolled .brand-logo-img { width: 40px; } .brand-name, .brand-logo-img { transition: font-size var(--transition), width var(--transition); } .site-header::after { content:''; position:absolute; bottom:0; left:0; right:0; height:1px; background:linear-gradient(to right, transparent 0%, rgba(201,168,76,0.2) 10%, rgba(201,168,76,0.55) 50%, rgba(201,168,76,0.2) 90%, transparent 100%); } .brand { display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0; } .brand-logo-img { width:48px; height:auto; margin-bottom:6px; } .brand-name { font-family: var(--font-script); font-size: 2.4rem; /* ← BRAND SIZE */ font-weight: 400; color: var(--gold-light); text-shadow: 0 1px 8px rgba(201,168,76,0.3), 0 0 24px rgba(201,168,76,0.1); line-height:1; letter-spacing:0.03em; white-space:nowrap; } .nav-list { display:flex; list-style:none; gap:1.6rem; align-items:center; } /* ← NAV GAP */ .nav-list > li { position:relative; } .nav-list a, .sub-toggle--label { font-family: var(--font-serif); font-size: 1.1rem; /* ← NAV SIZE (design 1.05rem) */ font-style: italic; letter-spacing: 0.05em; color: rgba(240,237,232,0.85); /* ← NAV COLOUR (design 0.75) */ transition: color var(--transition); font-weight: 400; white-space:nowrap; } .nav-list a:hover, .nav-list a.active, .sub-toggle--label:hover, .sub-toggle--label.active { color:var(--gold-light); } .has-sub { display:flex; align-items:center; gap:0.25rem; } .sub-toggle { display:inline-flex; align-items:center; gap:0.35rem; padding:0.2rem; color:rgba(240,237,232,0.7); } .sub-toggle:hover { color:var(--gold-light); } .nav-caret { width:9px; height:6px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; transition:transform var(--transition); } .has-sub.open > .sub-toggle .nav-caret { transform:rotate(180deg); } /* only its own arrow (round 40) */ .has-sub > a.active + .sub-toggle, .has-sub.is-active > .sub-toggle { color:var(--gold-light); } .sub-menu { list-style:none; position:absolute; top:calc(100% + 0.9rem); left:50%; transform:translate(-50%, 6px); min-width:250px; padding:1.1rem 1.5rem 1rem; text-align:center; background:linear-gradient(180deg, rgba(26,32,46,0.98), rgba(14,18,27,0.98)); border:1px solid rgba(201,168,76,0.4); box-shadow:0 18px 44px rgba(0,0,0,0.6), 0 0 18px rgba(201,168,76,0.12), inset 0 1px 0 rgba(201,168,76,0.12); backdrop-filter:blur(14px); opacity:0; visibility:hidden; transition:opacity var(--transition), transform var(--transition), visibility var(--transition); z-index:120; } .sub-menu::before { content:''; position:absolute; left:0; right:0; top:-1rem; height:1rem; } /* hover bridge */ .sub-menu::after { /* gold light line on top */ content:''; position:absolute; left:12%; right:12%; top:-1px; height:1px; background:linear-gradient(to right, transparent, #f3dc9a, transparent); } .sub-menu > li { padding:0; } .sub-menu > li + li { border-top:1px solid rgba(201,168,76,0.12); } .sub-menu > li > a { display:block; padding:0.6rem 0.4rem; transition:color var(--transition), letter-spacing var(--transition); } .sub-menu a { font-size:1.05rem; } .sub-menu a:hover, .sub-menu a.active { color:#f6e3ae; } .sub-menu > li > a:hover { letter-spacing:0.08em; } .has-sub:hover > .sub-menu, .has-sub:focus-within > .sub-menu, .has-sub.open > .sub-menu { opacity:1; visibility:visible; transform:translate(-50%, 0); } .has-sub.is-closed > .sub-menu { opacity:0 !important; visibility:hidden !important; transform:translate(-50%, 6px) !important; } .nav-list > li:nth-last-child(2).is-closed > .sub-menu { transform:translate(0, 6px) !important; } .sub-toggle { cursor:pointer; } .nav-list > li:last-child .sub-menu, .nav-list > li:nth-last-child(2) .sub-menu { left:auto; right:0; transform:translate(0, 6px); } .nav-list > li:nth-last-child(2):hover > .sub-menu, .nav-list > li:nth-last-child(2):focus-within > .sub-menu, .nav-list > li:nth-last-child(2).open > .sub-menu { transform:translate(0,0); } /* Locations mega menu — 4 regions, same look as the Island-wide Coverage block (round 34) */ .mega-menu { width:min(940px, 94vw); padding:1.7rem 1rem 1.1rem; } .mega-menu--services { width:min(1080px, 96vw); } .regions--menu { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:0; } /* columns never overflow (round 38) */ .region-toggle { display:none; } .regions--menu .region { position:relative; text-align:center; padding:0 1rem; } .regions--menu .region + .region::before { content:''; position:absolute; left:0; top:6%; bottom:6%; width:1px; background:linear-gradient(to bottom, transparent, rgba(201,168,76,0.45), transparent); } .regions--menu .region-name { margin:0 0 0.15rem; line-height:1.1; } .regions--menu .region-name a { font-family:var(--font-script); font-style:normal; font-size:2.05rem; letter-spacing:0; color:var(--gold-light); text-shadow:0 0 2px rgba(0,0,0,0.5); transition:color var(--transition), text-shadow var(--transition); } .regions--menu .region-name a:hover, .regions--menu .region-name a[aria-current] { color:#f6e3ae; text-shadow:0 0 14px rgba(201,168,76,0.55); } .regions--menu .region-sub { font-family:var(--font-sans); font-size:0.6rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold-dim); margin:0 0 0.8rem; padding-bottom:0.7rem; border-bottom:1px solid rgba(201,168,76,0.16); } .regions--menu .region-towns { list-style:none; } .regions--menu .region-towns li { padding:0.2rem 0; } .regions--menu .region-towns a { font-size:1.02rem; } .region-alt { font-family:var(--font-sans) !important; font-style:normal !important; font-size:0.62rem !important; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold-dim) !important; border:1px solid rgba(201,168,76,0.3); padding:1px 6px; margin-left:4px; vertical-align:2px; white-space:nowrap; } .region-alt:hover, .region-alt[aria-current] { color:var(--gold-light) !important; border-color:rgba(201,168,76,0.7); } .mega-all { /* banner at the bottom of a mega menu (desktop: box; phones: underline, round 40) */ display:block; text-align:center; margin:1.4rem 0.4rem 0.2rem; padding:0.75rem 1rem; border:1px solid rgba(201,168,76,0.45); background:linear-gradient(180deg, rgba(201,168,76,0.08), rgba(201,168,76,0.02)); font-size:1.08rem !important; letter-spacing:0.06em !important; color:var(--gold-light) !important; transition:border-color var(--transition), box-shadow var(--transition), color var(--transition); } .mega-all:hover { border-color:#f3dc9a; color:#f6e3ae !important; box-shadow:0 0 18px rgba(201,168,76,0.3); } .mega-all span { display:inline-block; transition:transform var(--transition); } .mega-all:hover span { transform:translateX(4px); } /* desktop: hover on the cards / towns in the mega menus (round 39): gold, small star, line grows from the centre */ @media (min-width: 1181px) { .regions--menu .region-towns a { position:relative; padding:0.1rem 0.2rem; transition:color 0.3s ease, transform 0.3s ease, text-shadow 0.3s ease; } .regions--menu .region-towns a::before { content:'\2726'; position:absolute; left:-0.95rem; top:50%; font-size:0.6rem; color:var(--gold-light); opacity:0; transform:translate(-4px, -50%) scale(0.6); transition:opacity 0.3s ease, transform 0.3s ease; } .regions--menu .region-towns a::after { content:''; position:absolute; left:10%; right:10%; bottom:-1px; height:1px; background:linear-gradient(to right, transparent, #f3dc9a, transparent); transform:scaleX(0); transition:transform 0.35s ease; } .regions--menu .region-towns a:hover, .regions--menu .region-towns a:focus-visible, .regions--menu .region-towns a[aria-current] { color:#f6e3ae; transform:translateX(3px); text-shadow:0 0 12px rgba(228,201,123,0.45); } .regions--menu .region-towns a:hover::before, .regions--menu .region-towns a:focus-visible::before { opacity:1; transform:translate(0, -50%) scale(1); } .regions--menu .region-towns a:hover::after, .regions--menu .region-towns a:focus-visible::after, .regions--menu .region-towns a[aria-current]::after { transform:scaleX(1); } } /* both mega menus open under the right side of the menu, never off screen (round 37) */ @media (min-width: 1181px) { .site-nav { position:relative; } .nav-list > li.has-mega { position:static; } .nav-list > li.has-mega > .mega-menu { left:auto; right:0; transform:translate(0, 6px); } .nav-list > li.has-mega:hover > .mega-menu, .nav-list > li.has-mega:focus-within > .mega-menu, .nav-list > li.has-mega.open > .mega-menu { transform:translate(0, 0); } .nav-list > li.has-mega.is-closed > .mega-menu { transform:translate(0, 6px) !important; } } .regions--menu .region-towns a { white-space:normal; display:inline-block; line-height:1.35; } .mega-menu--services .region-sub { letter-spacing:0.14em; } .regions--menu .region-name a { white-space:normal; } .mega-menu--services .regions--menu .region-name a { font-size:1.85rem; } .nav-cta { font-style:normal !important; letter-spacing:0.05em !important; background: rgba(30,38,54,0.98); border: 1px solid var(--gold-light); padding: 8px 18px; border-radius: 2px; color: var(--gold-light) !important; position:relative; overflow:hidden; display:inline-block; box-shadow: 0 0 12px rgba(201,168,76,0.18); transition: box-shadow var(--transition), border-color var(--transition); } .nav-cta::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 0%, rgba(201,168,76,0.1), transparent 68%); pointer-events:none; } .nav-cta:hover { box-shadow:0 0 22px rgba(201,168,76,0.38), 0 0 8px rgba(228,201,123,0.2); } .menu-icon { display:none; } .menu-icon__close { display:none; } .site-nav.is-open .menu-icon__open { display:none; } .site-nav.is-open .menu-icon__close { display:inline; font-size:1.45rem; } /* ════════════════════════════════════════════════════════ HERO — shared background (heart image + dark gradient fade) ════════════════════════════════════════════════════════ */ .hero, .page-hero { position:relative; isolation:isolate; overflow:hidden; } .hero-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:-2; } .hero::before, .page-hero::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; } /* Homepage hero (design: .hero) */ .hero { padding-top:220px; padding-bottom:220px; min-height:100vh; } .hero::before { background:linear-gradient(to bottom, rgba(26,32,44,0.45) 0%, rgba(26,32,44,0.72) 45%, rgba(26,32,44,0.97) 100%); } .hero p, .hero .lead { color: rgba(255,255,255,0.92); } .hero .eyebrow { color: var(--gold-light); text-shadow:0 1px 6px rgba(0,0,0,0.8); } /* Inner page hero (design: .about-hero in css/about.css) */ .page-hero { width:100%; min-height:64vh; /* ← INNER HERO HEIGHT */ display:flex; align-items:flex-start; justify-content:center; padding-top:235px; padding-bottom:8rem; /* round 39/40: content starts at the same height on every page */ } .page-hero::before { background:linear-gradient(to bottom, rgba(26,32,44,0.35) 0%, rgba(26,32,44,0.6) 45%, rgba(26,32,44,0.97) 100%); } .page-hero__inner { position:relative; text-align:center; padding:0 2rem; max-width:1000px; } .page-hero__eyebrow { display:inline-block; font-family: var(--font-serif); font-size: 0.82rem; /* ← HERO EYEBROW SIZE (design 0.7rem) */ font-weight: 500; letter-spacing: 0.4em; text-transform: uppercase; color: rgba(228,201,123,0.9); /* ← brighter than design so it stays readable over the heart */ text-shadow: 0 1px 8px rgba(0,0,0,0.9), 0 0 2px rgba(0,0,0,0.8); margin-bottom: 1.2rem; } .page-hero__title { font-family: var(--font-script); font-size: clamp(3.2rem, 7vw, 6.2rem); /* ← HERO TITLE SIZE (design max 7rem; slightly smaller for longer titles) */ font-weight: 400; color: var(--gold-light); line-height: 1.08; margin-bottom: 1rem; text-shadow: 0 0 3px rgba(0,0,0,0.9), 0 0 12px rgba(0,0,0,0.7), 0 4px 24px rgba(0,0,0,0.5); } .page-hero__line { width:60px; height:1px; margin:1.1rem auto; background:linear-gradient(to right, transparent, var(--gold-light), transparent); box-shadow:0 0 6px rgba(228,201,123,0.3); } .page-hero__text { max-width: 720px; margin: 1.6rem auto 0; color: rgba(240,237,232,0.88); text-shadow: 0 1px 10px rgba(0,0,0,0.8); } .page-hero__subtitle { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(1.15rem, 2.2vw, 1.5rem); /* ← HERO SUBTITLE SIZE (design max 1.4rem) */ color: rgba(240,237,232,0.9); /* ← design 0.72 */ letter-spacing: 0.08em; max-width: 640px; margin: 0 auto; text-shadow: 0 1px 10px rgba(0,0,0,0.8); } /* ════════════════════════════════════════════════════════ GOLD DIVIDER LINE ════════════════════════════════════════════════════════ */ .divider { height:1px; border:none; margin:0; background:linear-gradient(to right, rgba(201,168,76,0) 0%, rgba(201,168,76,0.06) 8%, rgba(228,201,123,0.82) 50%, rgba(201,168,76,0.06) 92%, rgba(201,168,76,0) 100%); box-shadow:0 0 8px rgba(201,168,76,0.18); } .divider-glow { width:100%; height:20px; background:linear-gradient(to bottom, rgba(201,168,76,0.04), transparent); } /* ════════════════════════════════════════════════════════ SECTION SPACING ════════════════════════════════════════════════════════ */ .section-pad { padding: 9rem 0; } .section-pad--sm { padding: 6rem 0; } .section-tinted { background:linear-gradient(180deg, var(--bg) 0%, rgba(32,40,52,0.55) 50%, var(--bg) 100%); } .section-fade-top::before { content:''; position:absolute; top:0; left:0; right:0; height:100px; background:linear-gradient(to bottom, var(--bg), transparent); pointer-events:none; } .section-fade-bottom::after { content:''; position:absolute; bottom:0; left:0; right:0; height:100px; background:linear-gradient(to top, var(--bg), transparent); pointer-events:none; } /* ════════════════════════════════════════════════════════ IMAGE FRAMES — inner thin frame + outer frame + corner accents ════════════════════════════════════════════════════════ */ .img-frame { position:relative; width:100%; max-width:520px; justify-self:center; } .img-frame img { width:100%; height:auto; display:block; object-fit:cover; filter:grayscale(15%) brightness(85%) contrast(1.05); position:relative; z-index:1; } .img-frame::before { content:''; position:absolute; inset:-6px; border:1px solid var(--gold-light); z-index:2; pointer-events:none; box-shadow:0 0 16px rgba(201,168,76,0.28), 0 0 6px rgba(74,158,224,0.15), inset 0 0 10px rgba(201,168,76,0.12); } /* TRY-OUT: card shine on image frames (was border rgba(201,168,76,0.45), no shadow) */ .img-frame::after { content:''; position:absolute; inset:-14px; border:2px solid rgba(201,168,76,0.2); z-index:2; pointer-events:none; } .img-frame .corner { position:absolute; width:16px; height:16px; border-color:var(--gold-light); border-style:solid; z-index:4; } .img-frame .corner-tl { top:-7px; left:-7px; border-width:1.5px 0 0 1.5px; } .img-frame .corner-tr { top:-7px; right:-7px; border-width:1.5px 1.5px 0 0; } .img-frame .corner-bl { bottom:-7px; left:-7px; border-width:0 0 1.5px 1.5px; } .img-frame .corner-br { bottom:-7px; right:-7px; border-width:0 1.5px 1.5px 0; } /* Image "light up" (hover on desktop, .is-lit while scrolling on phones, main.js): the frame around the image glows brighter, the photo itself only gets brighter, like turning up the screen brightness. Slower than the cards (0.8s), because it is always one single item. */ .img-frame img { transition: filter 0.8s ease; } .img-frame::before, .img-frame::after, .img-frame .corner { transition: border-color 0.8s ease, box-shadow 0.8s ease; } .img-frame:hover img, .img-frame.is-lit img { filter: grayscale(0%) brightness(100%) contrast(1.05); } .img-frame:hover::before, .img-frame.is-lit::before { border-color: #f3dc9a; box-shadow: 0 0 30px rgba(201,168,76,0.45), 0 0 10px rgba(74,158,224,0.25), inset 0 0 12px rgba(228,201,123,0.2); } .img-frame:hover::after, .img-frame.is-lit::after { border-color: rgba(228,201,123,0.45); } .img-frame:hover .corner, .img-frame.is-lit .corner { border-color: #f6e3ae; } /* ════════════════════════════════════════════════════════ ORNAMENT — five stars ════════════════════════════════════════════════════════ */ .ornament { text-align:center; padding:0; line-height:1; color:rgba(201,168,76,0.45); font-family:var(--font-serif); font-size:0.9rem; letter-spacing:8px; user-select:none; } /* Equal space above and below every ornament, everywhere: the sections directly before and after it always use --ornament-space on that side (overrides their normal padding). */ section:has(+ .ornament) { padding-bottom:var(--ornament-space); } .ornament + section { padding-top:var(--ornament-space); } /* ════════════════════════════════════════════════════════ CARDS ════════════════════════════════════════════════════════ */ .grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:36px; margin-top:3.5rem; } .grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:36px; margin-top:3.5rem; } .card { background: var(--bg2); border: 1px solid rgba(201,168,76,0.28); padding: 2.8rem 2.2rem; display:flex; flex-direction:column; align-items:center; text-align:center; position:relative; overflow:hidden; border-radius:2px; transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition); } .card::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 0%, rgba(201,168,76,0.09), transparent 68%); opacity:0.5; pointer-events:none; transition:opacity var(--transition); } .card:hover { background:var(--bg3); border-color:rgba(201,168,76,0.55); box-shadow:0 0 20px rgba(201,168,76,0.18), inset 0 1px 0 rgba(201,168,76,0.08); transform:translateY(-4px); } .card:hover::before { opacity:1; } .card p { flex:1; margin-bottom:0; } .card .btn { margin-top:2.4rem; } .card--featured { border-color:var(--gold); box-shadow:0 0 24px rgba(201,168,76,0.18); } /* ════════════════════════════════════════════════════════ SOCIAL ICON BUTTONS ════════════════════════════════════════════════════════ */ .social-row { display:flex; flex-wrap:wrap; gap:0.55rem; margin-top:1.8rem; } .social-icon-link { display:inline-flex; align-items:center; justify-content:center; gap:0; width:40px; height:40px; /* ← SOCIAL BUTTON SIZE (design 38px) */ background:rgba(20,26,38,0.97); border:1px solid rgba(201,168,76,0.45); color:var(--gold-light); border-radius:2px; text-decoration:none; position:relative; overflow:hidden; flex-shrink:0; transition:width var(--transition), padding var(--transition), gap var(--transition), border-color var(--transition), box-shadow var(--transition); } .social-icon-link::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 0%, rgba(201,168,76,0.1), transparent 68%); pointer-events:none; } .social-icon-link svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; position:relative; z-index:1; } .social-label { font-family:var(--font-sans); font-size:0.7rem; letter-spacing:0.15em; text-transform:uppercase; font-weight:400; color:var(--gold-dim); opacity:0; width:0; overflow:hidden; white-space:nowrap; transition:opacity var(--transition), width var(--transition); position:relative; z-index:1; } .social-icon-link:hover, .social-icon-link:focus-visible { width:auto; padding:0 12px; gap:8px; border-color:rgba(201,168,76,0.8); box-shadow:0 0 14px rgba(201,168,76,0.2); } .social-icon-link:hover .social-label, .social-icon-link:focus-visible .social-label { opacity:1; width:auto; } /* ════════════════════════════════════════════════════════ 18+ ADULT BANNER ════════════════════════════════════════════════════════ */ .adult-banner { position:fixed; bottom:0; left:0; width:100%; background:rgba(18,22,32,0.97); border-top:1px solid rgba(201,168,76,0.55); z-index:99999; padding:1.4rem 5%; display:flex; justify-content:space-between; align-items:center; gap:2rem; box-shadow:0 -8px 40px rgba(0,0,0,0.7); transition:transform 0.45s ease, opacity 0.45s ease; backdrop-filter:blur(14px); } .adult-banner[hidden] { display:none; } .adult-banner.is-closing { opacity:0; transform:translateY(100%); } .banner-text { font-family:var(--font-sans); font-size:0.88rem; color:var(--text-muted); line-height:1.65; font-weight:300; max-width:900px; } /* ← design 0.8rem */ .banner-text strong { font-weight:400; color:var(--gold-light); } .banner-text a { color:var(--blue); text-decoration:underline; } .banner-buttons { display:flex; gap:10px; flex-shrink:0; } .banner-buttons .btn { margin-top:0; } /* ════════════════════════════════════════════════════════ SCROLL TO TOP ════════════════════════════════════════════════════════ */ #scroll-top-btn { position:fixed; bottom:110px; right:28px; width:46px; height:46px; background:rgba(20,26,38,0.97); border:1px solid rgba(201,168,76,0.4); color:var(--text-muted); border-radius:2px; z-index:9997; display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:border-color var(--transition), color var(--transition), opacity var(--transition), visibility var(--transition), box-shadow var(--transition); } #scroll-top-btn.visible { opacity:1; visibility:visible; } #scroll-top-btn svg { width:20px; height:20px; transition:transform var(--transition); } #scroll-top-btn:hover { border-color:var(--gold); color:var(--gold-light); box-shadow:0 0 10px rgba(201,168,76,0.25); } #scroll-top-btn:hover svg { transform:translateY(-2px); } /* ════════════════════════════════════════════════════════ CHAT BUTTON (the chat window itself: /mgc/widget.css, loaded on demand) ════════════════════════════════════════════════════════ */ .mgc-launcher { position:fixed; right:24px; bottom:24px; z-index:2147482000; width:58px; height:58px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, #131923 0%, #1e2736 100%); border:1.5px solid rgba(201,168,76,0.6); color:var(--gold-light); box-shadow:0 6px 28px rgba(0,0,0,0.55); transition:transform var(--transition), box-shadow var(--transition); animation:mgc-pulse 3.5s ease-in-out infinite; } .mgc-launcher svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .mgc-launcher:hover { transform:scale(1.07); box-shadow:0 8px 32px rgba(0,0,0,0.65), 0 0 18px rgba(201,168,76,0.25); } .mgc-launcher.is-loading { opacity:.7; animation:none; } .mgc-badge { position:absolute; top:-3px; right:-3px; min-width:20px; height:20px; padding:0 5px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--gold); color:#0f1219; border:2px solid #0f1219; font:700 11px/1 var(--font-sans); } .mgc-badge[hidden] { display:none; } @keyframes mgc-pulse { 0%,100% { box-shadow:0 6px 28px rgba(0,0,0,0.55), 0 0 0 0 rgba(201,168,76,0.35); } 55% { box-shadow:0 6px 28px rgba(0,0,0,0.55), 0 0 0 10px rgba(201,168,76,0); } } @media (max-width: 968px) { .mgc-launcher:not(.m-contact .mgc-launcher) { right:16px; bottom:16px; width:54px; height:54px; } } /* keep the 18+ banner buttons free: lift the chat button while the banner is visible */ .adult-banner:not([hidden]) ~ .mgc-launcher, .adult-banner:not([hidden]) ~ .m-contact .mgc-launcher { bottom:calc(var(--banner-h, 110px) + 16px); } /* ── Contact bar (round 43): desktop = only the round chat button; phones = bar at the bottom ── */ .m-contact { display:contents; } .m-contact__item, .m-contact__label, .m-contact__tease { display:none; } @media (max-width: 968px) { /* round 44: same look as the contact buttons on /contact/ (gold-framed tiles) */ .m-contact { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; position:fixed; left:0; right:0; bottom:0; z-index:9998; padding:8px 10px calc(8px + env(safe-area-inset-bottom)); background:linear-gradient(180deg, rgba(30,38,54,0.98) 0%, rgba(18,22,32,0.99) 100%); box-shadow:0 -8px 26px rgba(0,0,0,0.55); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } .m-contact::before { /* gold line on top, fading to the sides */ content:''; position:absolute; left:0; right:0; top:0; height:1px; background:linear-gradient(to right, transparent, rgba(201,168,76,0.6) 15%, #f3dc9a 50%, rgba(201,168,76,0.6) 85%, transparent); } .m-contact__item, .m-contact .mgc-launcher { position:relative; inset:auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; width:auto; height:auto; min-height:58px; padding:0.6rem 0.3rem 0.55rem; margin:0; border:1px solid rgba(201,168,76,0.55); border-radius:0; background:rgba(20,26,38,0.9); box-shadow:none; animation:none; transform:none; color:var(--gold-light); text-decoration:none; cursor:pointer; transition:border-color 0.35s ease, box-shadow 0.35s ease, color 0.35s ease; } .m-contact__item:active, .m-contact .mgc-launcher:active { border-color:#f3dc9a; box-shadow:0 0 14px rgba(201,168,76,0.35); } .m-contact .mgc-launcher:hover { transform:none; } .m-contact svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; } .m-contact__label, .m-contact__tease { display:block; font-family:var(--font-serif); font-size:1rem; letter-spacing:0.03em; color:var(--gold-light); line-height:1.1; transition:opacity 0.5s ease, transform 0.5s ease; } /* "Let's talk ;)" on phones: the Direct Chat label changes for a few seconds, with a soft gold glow */ /* round 45: "Let's talk ;)" in gold, and the tile gets the hover look of the cards (lift, bright frame, gold glow, light from below) */ .m-contact__tease { position:absolute; left:0; right:0; bottom:0.55rem; text-align:center; color:var(--gold-light); font-weight:600; opacity:0; transform:translateY(6px); text-shadow:0 0 10px rgba(228,201,123,0.6); } .m-contact .mgc-launcher.is-teasing .m-contact__label { opacity:0; transform:translateY(-6px); } .m-contact .mgc-launcher.is-teasing .m-contact__tease { opacity:1; transform:none; } .m-contact .mgc-launcher { transition:transform 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease, background 0.45s ease; } .m-contact .mgc-launcher.is-teasing { transform:translateY(-4px); border-color:#f3dc9a; background:radial-gradient(ellipse at 50% 120%, rgba(228,201,123,0.26), transparent 70%), rgba(30,38,54,0.98); box-shadow:0 10px 26px rgba(0,0,0,0.45), 0 0 26px rgba(201,168,76,0.5), 0 0 8px rgba(74,158,224,0.25), inset 0 1px 0 rgba(228,201,123,0.3); animation:mgc-bar-glow 1.8s ease-in-out infinite; } .m-contact .mgc-launcher.is-teasing:hover { transform:translateY(-4px); } /* breathing: the icon AND the text breathe together */ .m-contact .mgc-launcher svg { animation:mgc-icon-pulse 3.5s ease-in-out infinite; } .m-contact .mgc-launcher .m-contact__label { animation:mgc-text-pulse 3.5s ease-in-out infinite; } @keyframes mgc-bar-glow { 0%,100% { box-shadow:0 10px 26px rgba(0,0,0,0.45), 0 0 18px rgba(201,168,76,0.35), inset 0 1px 0 rgba(228,201,123,0.3); } 50% { box-shadow:0 10px 26px rgba(0,0,0,0.45), 0 0 34px rgba(201,168,76,0.7), inset 0 1px 0 rgba(228,201,123,0.3); } } @keyframes mgc-icon-pulse { 0%,100% { filter:drop-shadow(0 0 0 rgba(228,201,123,0)); } 55% { filter:drop-shadow(0 0 6px rgba(228,201,123,0.8)); } } @keyframes mgc-text-pulse { 0%,100% { text-shadow:0 0 0 rgba(228,201,123,0); color:var(--gold-light); } 55% { text-shadow:0 0 10px rgba(228,201,123,0.75); color:#f6e3ae; } } .m-contact .mgc-badge { top:4px; right:calc(50% - 26px); } body { padding-bottom:calc(74px + env(safe-area-inset-bottom)); } #scroll-top-btn { bottom:calc(88px + env(safe-area-inset-bottom)) !important; right:16px; } } @media (max-width: 968px) and (prefers-reduced-motion: reduce) { .m-contact .mgc-launcher.is-teasing, .m-contact .mgc-launcher svg, .m-contact .mgc-launcher .m-contact__label { animation:none; } } /* ════════════════════════════════════════════════════════ FOOTER ════════════════════════════════════════════════════════ */ .site-footer { background:var(--bg); padding:6rem 0 3rem; position:relative; } .site-footer::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(to right, rgba(201,168,76,0) 0%, rgba(201,168,76,0.06) 8%, rgba(228,201,123,0.75) 50%, rgba(201,168,76,0.06) 92%, rgba(201,168,76,0) 100%); box-shadow:0 0 12px rgba(201,168,76,0.12); } .footer-inner { display:grid; grid-template-columns:1.8fr 1fr 1fr 1fr; gap:3.5rem; margin-bottom:4rem; } .footer-brand { display:flex; align-items:center; gap:10px; margin-bottom:1.2rem; } .footer-logo-img { width:40px; height:auto; margin-bottom:6px; } .footer-brand-name { font-family:var(--font-script); font-size:2rem; color:var(--gold-light); text-shadow:0 1px 8px rgba(201,168,76,0.25); letter-spacing:0.03em; text-decoration:none; } .footer-about { font-size:1.08rem; color:var(--text-muted); line-height:1.8; max-width:360px; } .footer-phone { margin-top:1.2rem; font-size:1.05rem; } .footer-phone a { color:var(--gold-light); font-size:1.2rem; letter-spacing:0.04em; display:block; } .footer-phone span { font-family:var(--font-sans); font-size:0.72rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold-dim); } .footer-heading { font-family:var(--font-serif); font-style:italic; font-size:1.2rem; font-weight:400; color:var(--text); margin-bottom:1.1rem; letter-spacing:0.03em; } .footer-heading--spaced { margin-top:2.2rem; } .footer-links { list-style:none; } .footer-links li { margin-bottom:0.55rem; } .footer-links a { font-family:var(--font-serif); font-size:1.06rem; color:var(--text-muted); transition:color var(--transition), padding-left var(--transition); } .footer-links a:hover, .footer-links a[aria-current] { color:var(--gold-light); padding-left:4px; } .footer-bottom { border-top:1px solid rgba(255,255,255,0.06); padding-top:2rem; display:flex; justify-content:space-between; align-items:center; gap:1.5rem; } .footer-copy { font-family:var(--font-sans); font-size:0.82rem; line-height:1.6; margin:0; color:var(--text-faint); font-weight:300; } .footer-legal { display:flex; gap:2rem; font-size:0.82rem; line-height:1.6; } .footer-legal a { font-family:var(--font-sans); font-size:0.82rem; color:var(--text-faint); font-weight:300; } .footer-legal a:hover { color:var(--gold-light); } /* ════════════════════════════════════════════════════════ UTILITY ════════════════════════════════════════════════════════ */ .text-center { text-align:center; } .text-gold { color:var(--gold-light); -webkit-text-fill-color:var(--gold-light); } .mt-0 { margin-top:0 !important; } .mt-1 { margin-top:1rem; } .mt-2 { margin-top:2rem; } .mb-0 { margin-bottom:0 !important; } .mb-1 { margin-bottom:1rem; } .mb-2 { margin-bottom:2rem; } .hidden { display:none !important; } .visually-hidden { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } /* ════════════════════════════════════════════════════════ RESPONSIVE — MENU COLLAPSES ≤ 1180px (9 menu items) ════════════════════════════════════════════════════════ */ @media (max-width: 1180px) { .menu-icon { display:block; color:var(--gold-light); font-size:1.7rem; line-height:1; padding:0.3rem 0.4rem; position:relative; z-index:20; } .nav-list { display:none; flex-direction:column; align-items:stretch; gap:0; position:absolute; top:100%; left:0; right:0; background:#121620; padding:1.5rem 6% 2rem; border:1px solid rgba(201,168,76,0.2); border-top:none; max-height:calc(100vh - 90px); overflow-y:auto; box-shadow:0 20px 40px rgba(0,0,0,0.5); } .site-nav.is-open .nav-list { display:flex; } /* whole row clickable: links/toggles fill the row */ .nav-list > li { border-bottom:1px solid rgba(255,255,255,0.05); padding:0; } .nav-list > li:last-child { border-bottom:none; padding-top:1.2rem; } .nav-list a, .sub-toggle--label { font-size:1.2rem; } .nav-list > li > a { display:block; padding:0.85rem 0; } .has-sub { flex-wrap:wrap; justify-content:space-between; } .has-sub > a { flex:1; } .sub-toggle { padding:0.85rem 0.4rem 0.85rem 1.4rem; align-self:stretch; } .sub-toggle--label { flex:1; justify-content:space-between; padding:0.85rem 0; text-align:left; } .sub-menu a { display:block; padding:0.45rem 0; } .regions--menu a { display:block; } .sub-menu, .mega-menu, .nav-list > li:last-child .sub-menu, .nav-list > li:nth-last-child(2) .sub-menu { position:static; transform:none !important; opacity:1; visibility:visible; display:none; width:100%; min-width:0; box-shadow:none; border:none; border-left:1px solid rgba(201,168,76,0.3); background:transparent; padding:0.4rem 0 0.2rem 1.2rem; margin-top:0.5rem; backdrop-filter:none; } .nav-list .has-sub.open > .sub-menu { display:block; } .sub-menu::after { display:none; } .sub-menu > li + li { border-top:none; } .sub-menu { text-align:left; } /* phones: only the 4 gold titles; the arrow opens the detailed list (round 38) */ .mega-menu { width:100%; } .regions--menu { grid-template-columns:1fr; gap:0; margin-top:0.2rem; } .regions--menu .region { text-align:left; padding:0; border-bottom:1px solid rgba(201,168,76,0.12); } .regions--menu .region:last-child { border-bottom:0; } .regions--menu .region + .region::before { display:none; } .regions--menu .region-name { display:flex; align-items:center; justify-content:space-between; margin:0; } .regions--menu .region-name a, .mega-menu--services .regions--menu .region-name a { font-size:1.6rem; display:inline-block; padding:0.95rem 0 0.85rem; } .mega-all { display:table; margin:1.2rem 0 0.4rem; padding:0 0 0.2rem; border:0; border-bottom:1px solid rgba(228,201,123,0.55); background:none; box-shadow:none !important; } .has-sub.open > a, .has-sub.open > .sub-toggle { color:var(--gold-light); } /* open item: text + arrow gold */ .region-toggle { color:var(--gold-light) !important; } /* next to the gold titles: gold arrow */ .region-toggle { display:inline-flex; align-items:center; justify-content:center; align-self:stretch; padding:0 0.4rem 0 1.4rem; color:rgba(240,237,232,0.7); background:none; border:0; cursor:pointer; } .region.open .region-toggle .nav-caret { transform:rotate(180deg); } .regions--menu .region-sub, .regions--menu .region-towns { display:none; } .regions--menu .region.open .region-towns { display:block; padding:0 0 0.7rem 1rem; } .regions--menu .region-towns a { display:inline-block; padding:0.3rem 0; } .regions--menu .region-alt { display:inline-block; padding:1px 6px !important; } .mega-all { text-align:left; } .nav-cta { text-align:center; display:block; } } /* ════════════════════════════════════════════════════════ RESPONSIVE — TABLET ≤ 1080px ════════════════════════════════════════════════════════ */ @media (max-width: 1080px) { .grid-3, .grid-2 { grid-template-columns:1fr; gap:24px; } .footer-inner { grid-template-columns:1fr 1fr 1fr; gap:3rem 2.5rem; } .footer-col-left { grid-column:1 / -1; position:relative; padding-bottom:4rem; margin-bottom:1rem; } /* divider under the contact buttons (same line as at the top of the footer) */ .footer-col-left::after { content:''; position:absolute; left:-5%; right:-5%; bottom:0; height:1px; background:linear-gradient(to right, rgba(201,168,76,0) 0%, rgba(201,168,76,0.06) 8%, rgba(228,201,123,0.75) 50%, rgba(201,168,76,0.06) 92%, rgba(201,168,76,0) 100%); box-shadow:0 0 12px rgba(201,168,76,0.12); } h2.section-title { white-space:normal !important; } } /* ════════════════════════════════════════════════════════ RESPONSIVE — MOBILE ≤ 968px ════════════════════════════════════════════════════════ */ @media (max-width: 968px) { .split { grid-template-columns:1fr; gap:3.5rem; } .split .img-frame { order:-1; max-width:100%; margin:14px 0; } /* 14px = outer gold frame, keeps spacing even */ .hero { padding-top:160px; padding-bottom:80px; min-height:auto; } .page-hero { min-height:52vh; padding-top:170px; padding-bottom:5rem; } .section-pad { padding:5.5rem 0; } .footer-inner { grid-template-columns:1fr 1fr 1fr; gap:2.5rem 2rem; } :root { --ornament-space: 8rem; } .section-fade-top::before, .section-fade-bottom::after { height:60px; } .footer-bottom { flex-direction:column; gap:1rem; text-align:center; } .footer-legal { justify-content:center; } #scroll-top-btn { bottom:90px; right:16px; width:40px; height:40px; } .grid-3, .grid-2 { grid-template-columns:1fr; gap:28px; max-width:420px; margin-left:auto; margin-right:auto; } .card { padding:2rem 1.6rem; } .adult-banner { flex-direction:column; align-items:stretch; padding:1.2rem 5%; gap:0.8rem; } .banner-buttons { flex-direction:row; justify-content:center; gap:8px; } .banner-buttons .btn { flex:1 1 0; min-width:0; padding:11px 12px; } .banner-buttons .btn-label { font-size:1.05rem; white-space:nowrap; } h2.section-title { font-size:clamp(2rem, 7vw, 2.8rem); } .social-icon-link { width:auto; padding:0 10px; gap:8px; } .social-label { opacity:1; width:auto; overflow:visible; } /* all buttons centered on phones */ .btn { display:flex; width:fit-content; margin-left:auto; margin-right:auto; } .banner-buttons .btn { width:auto; margin-left:0; margin-right:0; } } @media (max-width: 600px) { .brand-name { font-size:2rem; } .site-header { padding-top:1.6rem; } .footer-inner { grid-template-columns:1fr 1fr; } .footer-col-left { grid-column:1 / -1; } :root { --ornament-space: 6.5rem; } .header-bar.is-scrolled .brand-name { font-size:1.8rem; } } /* ════════════════════════════════════════════════════════ FAQ SECTION (above the footer) — design: mrgentleman.gr css/faq.css ════════════════════════════════════════════════════════ */ .faq-section { padding: 4rem 0 7rem; } .faq-header { text-align: center; max-width: 680px; margin: 0 auto 3.5rem; } .faq-title { margin-bottom: 0.8rem; } .faq-intro { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.05rem, 1.8vw, 1.25rem); color: var(--text-muted); line-height: 1.65; max-width: 580px; margin: 0 auto; } .faq-list { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; } .faq-item { border-bottom: 1px solid rgba(201,168,76,0.15); position: relative; } .faq-item:first-child { border-top: 1px solid rgba(201,168,76,0.15); } .faq-item::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: linear-gradient(to bottom, transparent, var(--gold), transparent); opacity: 0; transition: opacity 0.3s ease; } .faq-item.open::before { opacity: 1; } .faq-h { margin: 0; font: inherit; } .faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.5rem 1rem 1.5rem 1.5rem; background: transparent; border: none; cursor: pointer; text-align: left; color: inherit; font: inherit; transition: background var(--transition); } .faq-question:hover { background: rgba(201,168,76,0.04); } .faq-question:focus-visible { outline: 1px solid var(--gold); outline-offset: -1px; } .faq-q-text { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.15rem, 1.9vw, 1.35rem); font-weight: 400; color: var(--text); line-height: 1.4; transition: color var(--transition); } .faq-question:hover .faq-q-text, .faq-item.open .faq-q-text { color: var(--gold-light); } .faq-chevron { flex-shrink: 0; width: 18px; height: 18px; position: relative; border: 1px solid rgba(201,168,76,0.35); border-radius: 2px; background: rgba(201,168,76,0.05); transition: background var(--transition), border-color var(--transition); } .faq-chevron::before, .faq-chevron::after { content: ''; position: absolute; top: 50%; left: 50%; width: 8px; height: 1.5px; background: var(--gold-dim); border-radius: 1px; transition: transform 0.3s ease, opacity 0.3s ease, background var(--transition); } .faq-chevron::before { transform: translate(-50%, -50%) rotate(0deg); } .faq-chevron::after { transform: translate(-50%, -50%) rotate(90deg); } .faq-item.open .faq-chevron { background: rgba(201,168,76,0.15); border-color: rgba(201,168,76,0.6); } .faq-item.open .faq-chevron::before { background: var(--gold-light); } .faq-item.open .faq-chevron::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; } .faq-answer { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.55s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.45s ease; } .faq-item.open .faq-answer { grid-template-rows: 1fr; opacity: 1; } .faq-answer__inner { overflow: hidden; min-height: 0; } .faq-answer p { font-family: var(--font-serif); font-size: clamp(1.08rem, 1.7vw, 1.18rem); color: var(--text-muted); line-height: 1.8; padding: 0 1.5rem 1.8rem 1.5rem; margin: 0; } .faq-more { text-align: center; margin: 2.6rem 0 0; } @media (max-width: 768px) { .faq-section { padding: 4rem 0 5rem; } .faq-question { padding: 1.2rem 0.8rem 1.2rem 1rem; } .faq-answer p { padding: 0 1rem 1.5rem 1rem; } .faq-q-text { font-size: 1.12rem; } } /* ════════════════════════════════════════════════════════ BOOKING CTA BOX (home, services, …) — design: css/about.css ════════════════════════════════════════════════════════ */ .booking-cta { padding: 7rem 0; text-align: center; position: relative; overflow: clip; } .booking-cta::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(600px, 90vw); height: 300px; background: radial-gradient(ellipse, rgba(201,168,76,0.06) 0%, transparent 70%); pointer-events: none; } .booking-cta__box { display: inline-block; max-width: 680px; width: 90%; padding: 4rem 3.5rem; position: relative; z-index: 1; /* same look as the cards (.lux-card) */ background: radial-gradient(ellipse at 50% 0%, rgba(74,158,224,0.16), transparent 72%), rgba(30,38,54,0.98); border: 1px solid var(--gold-light); box-shadow: 0 0 16px rgba(201,168,76,0.28), 0 0 6px rgba(74,158,224,0.15), inset 0 1px 0 rgba(201,168,76,0.12); transition: transform 0.6s ease, box-shadow 0.6s ease, border-color 0.6s ease; /* single item: a bit slower than the cards */ } .booking-cta__box[data-href] { cursor: pointer; } /* whole box → contact page (main.js) */ .booking-cta__box:hover, .booking-cta__box.is-lit { /* .is-lit = lit by scrolling on phones (main.js) */ transform: translateY(-5px); border-color: #f3dc9a; box-shadow: 0 18px 40px rgba(0,0,0,0.5), 0 0 30px rgba(201,168,76,0.4), 0 0 10px rgba(74,158,224,0.22), inset 0 1px 0 rgba(228,201,123,0.25); } .booking-cta__box::before { content: ''; position: absolute; inset: -10px; border: 1px solid rgba(201,168,76,0.12); pointer-events: none; } .booking-cta__box::after { content: ''; position: absolute; top: 0; left: 15%; right: 15%; height: 1px; background: linear-gradient(to right, transparent, var(--gold-light), transparent); box-shadow: 0 0 8px rgba(228,201,123,0.25); } .booking-cta__corner { position: absolute; width: 14px; height: 14px; border: 0 solid var(--gold-light); } .booking-cta__corner--tl { top: 8px; left: 8px; border-top-width: 1px; border-left-width: 1px; } .booking-cta__corner--tr { top: 8px; right: 8px; border-top-width: 1px; border-right-width: 1px; } .booking-cta__corner--bl { bottom: 8px; left: 8px; border-bottom-width: 1px; border-left-width: 1px; } .booking-cta__corner--br { bottom: 8px; right: 8px; border-bottom-width: 1px; border-right-width: 1px; } .booking-cta__eyebrow { margin-bottom: 1rem; } .booking-cta__title { font-family: var(--font-script); font-size: clamp(2.4rem, 5vw, 3.8rem); font-weight: 400; color: var(--gold-light); margin-bottom: 1rem; line-height: 1.1; text-shadow: 0 0 2px rgba(0,0,0,0.5); } .booking-cta__text { max-width: 500px; margin: 0 auto; color: var(--text-muted); } .booking-cta__text + .booking-cta__text { margin-top: 1rem; } .booking-cta .btn { margin-top: 2.6rem; } /* Buttons in every booking box: the normal button hover look is their resting look … */ .booking-cta .btn { border-color: var(--gold-light); background: rgba(30,38,54,0.98); box-shadow: 0 0 16px rgba(201,168,76,0.28), 0 0 6px rgba(74,158,224,0.15), inset 0 1px 0 rgba(201,168,76,0.12); transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease, background 0.35s ease; } .booking-cta .btn::before { opacity: 1; } .booking-cta .btn .btn-label { color: var(--gold-light); } .booking-cta .btn .btn-sub { color: var(--gold); } /* … and on hover they lift and glow brighter, with a soft gold light from below */ .booking-cta .btn:hover { transform: translateY(-3px); border-color: #f3dc9a; background: radial-gradient(ellipse at 50% 120%, rgba(228,201,123,0.18), transparent 70%), rgba(30,38,54,0.98); box-shadow: 0 10px 26px rgba(0,0,0,0.45), 0 0 26px rgba(201,168,76,0.45), 0 0 8px rgba(74,158,224,0.25), inset 0 1px 0 rgba(228,201,123,0.3); } .booking-cta .btn:hover .btn-label { color: #f6e3ae; } .booking-cta .btn:hover .btn-sub { color: var(--gold-light); } @media (max-width: 1080px) { .booking-cta__box { padding: 3rem 2rem; } } @media (max-width: 968px) { .booking-cta { padding: 5rem 0; } } @media (max-width: 420px) { /* small phones: more room so the eyebrow always fits on one row */ .booking-cta__box { padding: 3rem 1.1rem; } } /* Eyebrows must always fit on ONE row: keep them short (max ~22 characters). Small phones get a little less letter-spacing as a safety net. */ @media (max-width: 380px) { .eyebrow { letter-spacing: 0.28em; } } /* ════════════════════════════════════════════════════════ SLIM "DETAILED SERVICE LIST" ROW (home + services) — keeps the old WP category links ════════════════════════════════════════════════════════ */ .service-list { text-align: center; margin: 3.5rem auto 0; max-width: 900px; } .service-list__label { display: block; margin-bottom: 0.9rem; font-family: var(--font-sans); font-size: 0.68rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-dim); } .service-list ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 0; } .service-list li { font-family: var(--font-serif); font-style: italic; font-size: 1.08rem; } .service-list li + li::before { content: '\00b7'; color: var(--gold-dim); margin: 0 0.8rem; } .service-list a { color: var(--text-muted); transition: color var(--transition); } .service-list a:hover { color: var(--gold-light); } /* ════════════════════════════════════════════════════════ LUX CARD — homepage "Explore My Services" + option cards on /services/ Resting look = the button hover look (gold-light border, gold + blue glow, blue light from the top). Hover = the card lifts a little and glows brighter. ════════════════════════════════════════════════════════ */ .lux-card { position: relative; display: flex; flex-direction: column; overflow: hidden; background: rgba(30,38,54,0.98); border: 1px solid var(--gold-light); box-shadow: 0 0 16px rgba(201,168,76,0.28), 0 0 6px rgba(74,158,224,0.15), inset 0 1px 0 rgba(201,168,76,0.12); border-radius: 2px; transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; } .lux-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(201,168,76,0.1), transparent 68%); pointer-events: none; z-index: 0; } .lux-card::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(74,158,224,0.2), transparent 72%); pointer-events: none; z-index: 1; transition: opacity 0.35s ease; } /* Hover = exactly the hover of the booking-box buttons ("Discover How to Book"): lift 3px, brighter glow, soft gold light from below, titles a touch lighter. .is-lit = the same look, switched on by scrolling on touch screens (main.js). */ .lux-card:hover, .lux-card:focus-within, .lux-card.is-lit { transform: translateY(-3px); border-color: #f3dc9a; box-shadow: 0 10px 26px rgba(0,0,0,0.45), 0 0 26px rgba(201,168,76,0.45), 0 0 8px rgba(74,158,224,0.25), inset 0 1px 0 rgba(228,201,123,0.3); } /* soft gold light from below: a layer that fades in (smooth, unlike a background swap) */ .lux-card__frame::before { content: ''; position: absolute; inset: -8px; background: radial-gradient(ellipse at 50% 120%, rgba(228,201,123,0.18), transparent 70%); opacity: 0; transition: opacity 0.35s ease; } .lux-card:hover .lux-card__frame::before, .lux-card:focus-within .lux-card__frame::before, .lux-card.is-lit .lux-card__frame::before { opacity: 1; } .service-option__open, .price-card__open, .explore-card__title { transition: color 0.35s ease; } .lux-card:hover .service-option__open, .lux-card:hover .price-card__open, .lux-card:hover .explore-card__title, .lux-card.is-lit .service-option__open, .lux-card.is-lit .price-card__open, .lux-card.is-lit .explore-card__title { color: #f6e3ae; } .lux-card > * { position: relative; z-index: 2; } .lux-card__frame { position: absolute !important; inset: 7px; border: 1px solid rgba(201,168,76,0.12); pointer-events: none; } .lux-card__corner { position: absolute !important; width: 14px; height: 14px; border: 0 solid var(--gold-light); pointer-events: none; } .lux-card__corner--tl { top: 12px; left: 12px; border-top-width: 1px; border-left-width: 1px; } .lux-card__corner--br { bottom: 12px; right: 12px; border-bottom-width: 1px; border-right-width: 1px; } /* Slim service list above the footer (all pages except home) */ .service-list-wrap { padding: 2rem 0 1.1rem; } /* sits just above the footer divider */ .service-list-wrap .service-list { margin-top: 0; } .service-list-wrap .service-list a { color: var(--gold-light); } /* light gold, like the other gold text */ .service-list-wrap .service-list a:hover { color: #f6e3ae; } @media (max-width: 768px) { /* phones: fading divider above the list */ .service-list-wrap { position: relative; padding-top: 2rem; padding-bottom: 2rem; } /* round 55: same space above + below the links */ .service-list-wrap::before { content: ''; position: absolute; top: 0; left: 8%; right: 8%; height: 1px; background: linear-gradient(to right, transparent, rgba(201,168,76,0.45), transparent); } .service-list ul { gap: 0.55rem 1.3rem; } /* no loose dots at the start of a wrapped row */ .service-list li + li::before { display: none; } } /* Directory banners at the very bottom of the footer */ .footer-banners { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px 22px; margin-top: 2rem; padding-top: 5.5rem; border-top: 1px solid rgba(255,255,255,0.06); } /* line close to the copyright, lots of space before the banners */ .footer-banners > a { display: block; line-height: 0; opacity: 0.85; transition: opacity var(--transition); } .footer-banners > a:hover { opacity: 1; } .footer-banners > a img { max-width: 100% !important; height: auto !important; } @media (max-width: 520px) { .footer-banners > a { max-width: 100%; } } /* ════════ REGIONS BLOCK ("Island-wide Coverage" / "Nearby Areas": home, location pages, All Services) ════════ round 55: every region is a framed card (gold hairline + small corners), towns as gold-edged pills that wrap neatly on every screen; 4 / 3 / 2 / 1 cards per row depending on the number of regions and the screen. */ .regions--home { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem; margin: 3.4rem 0 0; } .regions--home .region { position: relative; text-align: center; padding: 2.3rem 1.3rem 2.1rem; border: 1px solid rgba(201,168,76,0.22); background: radial-gradient(ellipse at 50% 0%, rgba(201,168,76,0.09), transparent 62%), rgba(18,23,34,0.55); transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease; } .regions--home .region::before, .regions--home .region::after { /* small gold corners */ content: ''; position: absolute; width: 14px; height: 14px; border: 0 solid var(--gold-light); opacity: 0.75; pointer-events: none; } .regions--home .region::before { top: 7px; left: 7px; border-top-width: 1px; border-left-width: 1px; } .regions--home .region::after { bottom: 7px; right: 7px; border-bottom-width: 1px; border-right-width: 1px; } .regions--home .region:hover { border-color: rgba(228,201,123,0.55); box-shadow: 0 10px 30px rgba(0,0,0,0.35), 0 0 22px rgba(201,168,76,0.14); } .regions--home .region-name { font-family: var(--font-script); font-size: clamp(2.1rem, 2.6vw, 2.6rem); color: var(--gold-light); line-height: 1.1; margin-bottom: 0.25rem; } .regions--home .region-name a { color: inherit; text-decoration: none; transition: color var(--transition), text-shadow var(--transition); } .regions--home .region-name a:hover, .regions--home .region-name a[aria-current] { color: #f6e3ae; text-shadow: 0 0 16px rgba(201,168,76,0.55); } .regions--home .region-sub { font-family: var(--font-sans); font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 1.3rem; } .regions--home .region-sub::after { /* short fading gold line */ content: ''; display: block; width: 64px; height: 1px; margin: 0.95rem auto 0; background: linear-gradient(to right, transparent, rgba(228,201,123,0.8), transparent); } .regions--home .region-towns { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 0.45rem; } .regions--home .region-towns li { margin: 0; } .regions--home .region-towns a { display: inline-block; font-size: 1.06rem; font-style: italic; color: var(--text); line-height: 1.3; padding: 0.32rem 0.85rem; border: 1px solid rgba(201,168,76,0.24); border-radius: 999px; background: rgba(14,18,27,0.55); transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease; } .regions--home .region-towns a:hover, .regions--home .region-towns a:focus-visible, .regions--home .region-towns a[aria-current] { color: #f6e3ae; border-color: rgba(243,220,154,0.75); background: rgba(201,168,76,0.08); box-shadow: 0 0 14px rgba(201,168,76,0.22); } .regions--home .region-alt { display: none; } /* no "Gigolo" tags (round 55) */ /* fewer regions (location pages: own region + neighbours) */ .regions-wrap--1 .regions--home { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-left: auto; margin-right: auto; } .regions-wrap--2 .regions--home { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; margin-left: auto; margin-right: auto; } .regions-wrap--3 .regions--home { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 1080px) { .regions--home, .regions-wrap--3 .regions--home { grid-template-columns: repeat(2, minmax(0, 1fr)); } .regions-wrap--3 .regions--home .region:last-child { grid-column: 1 / -1; max-width: 520px; width: 100%; justify-self: center; } } @media (max-width: 768px) { /* phones: one card per row */ .regions--home, .regions-wrap--2 .regions--home, .regions-wrap--3 .regions--home { grid-template-columns: minmax(0, 1fr); gap: 1rem; max-width: none; margin-top: 2.6rem; } .regions-wrap--3 .regions--home .region:last-child { max-width: none; } .regions--home .region { padding: 1.9rem 1rem 1.7rem; } .regions--home .region-sub { margin-bottom: 1.1rem; } .regions--home .region-towns a { font-size: 1.02rem; padding: 0.3rem 0.8rem; } } /* link to /male-escort-gigolo-crete/ under a regions block: same box as the Locations menu banner (round 55) */ .regions-all { text-align: center; margin: 2.4rem 0 0; } .regions-all__link { display: inline-block; padding: 0.8rem 1.6rem; font-family: var(--font-serif); font-style: italic; font-size: 1.12rem; letter-spacing: 0.04em; color: var(--gold-light); border: 1px solid rgba(201,168,76,0.45); background: linear-gradient(180deg, rgba(201,168,76,0.08), rgba(201,168,76,0.02)); transition: border-color var(--transition), box-shadow var(--transition), color var(--transition); } .regions-all__link:hover { border-color: #f3dc9a; color: #f6e3ae; box-shadow: 0 0 18px rgba(201,168,76,0.3); } .regions-all__link span { display: inline-block; transition: transform var(--transition); } .regions-all__link:hover span { transform: translateX(4px); } @media (max-width: 768px) { .regions-all__link { font-size: 1.02rem; padding: 0.75rem 1.1rem; } } /* gold titles in bullet lists are links (round 51) */ a.gold-link, .loc-why a.gold-link, .loc-places a.gold-link, .loc-list a.gold-link, .why-list a.gold-link { color: var(--gold-light); text-decoration: none; border-bottom: 1px solid rgba(228,201,123,0.28); transition: color 0.3s ease, border-color 0.3s ease, text-shadow 0.3s ease; } a.gold-link:hover, a.gold-link:focus-visible { color: #f6e3ae; border-bottom-color: #f3dc9a; text-shadow: 0 0 12px rgba(228,201,123,0.45); } /* ════════ FOOTER refresh (round 51) ════════ */ .site-footer { background: radial-gradient(ellipse at 50% 0%, rgba(201,168,76,0.07), transparent 55%), var(--bg); } .footer-heading { position: relative; font-family: var(--font-script); font-style: normal; font-size: 2rem; color: var(--gold-light); letter-spacing: 0.01em; line-height: 1.1; padding-bottom: 0.7rem; margin-bottom: 1.3rem; text-shadow: 0 0 2px rgba(0,0,0,0.5); } .footer-heading::after { content: ''; position: absolute; left: 0; bottom: 0; width: 52px; height: 1px; background: linear-gradient(to right, var(--gold-light), transparent); } .footer-links li { margin-bottom: 0.6rem; } .footer-links a::before { content: '\2726'; display: inline-block; font-size: 0.5rem; color: var(--gold-dim); margin-right: 0.6rem; vertical-align: 0.2em; transition: color var(--transition), transform var(--transition); } .footer-links a:hover::before, .footer-links a[aria-current]::before { color: var(--gold-light); transform: rotate(45deg); } .footer-bottom { border-top: 0; position: relative; } .footer-bottom::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(to right, transparent, rgba(201,168,76,0.35) 50%, transparent); } .footer-copy__brand { font-family: var(--font-script); font-size: 1.45em; font-weight: 400; color: var(--gold-light); letter-spacing: 0.02em; text-shadow: 0 0 8px rgba(201,168,76,0.25); vertical-align: -0.05em; } /* contact icons and social media: two rows with a small title each */ .footer-social__title { display: flex; align-items: center; gap: 0.8rem; margin: 2rem 0 0.8rem; font-family: var(--font-sans); font-size: 0.66rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold-dim); } .footer-social__title::after { content: ''; flex: 0 0 60px; height: 1px; background: linear-gradient(to right, rgba(201,168,76,0.5), transparent); } .footer-col-left .social-row { margin-top: 0; } .social-row--follow { gap: 0.6rem; } .follow-link { display: inline-flex; align-items: center; gap: 0.55rem; height: 42px; padding: 0 1.1rem 0 0.9rem; border: 1px solid rgba(201,168,76,0.45); background: rgba(20,26,38,0.9); color: var(--gold-light); text-decoration: none; font-family: var(--font-serif); font-style: italic; font-size: 1.05rem; letter-spacing: 0.03em; transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, color 0.35s ease; } .follow-link svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .follow-link:hover, .follow-link:focus-visible { transform: translateY(-2px); border-color: #f3dc9a; color: #f6e3ae; box-shadow: 0 6px 16px rgba(0,0,0,0.4), 0 0 16px rgba(201,168,76,0.3); } @media (max-width: 968px) { /* phones: contact icons as compact squares (no labels), so nothing is crowded */ .social-row:not(.social-row--follow) .social-icon-link { width: 44px; height: 44px; padding: 0; gap: 0; justify-content: center; } .social-row:not(.social-row--follow) .social-label { display: none; } } @media (max-width: 1080px) { /* same space above the divider under the contact block as below the top divider of the footer */ .footer-col-left { padding-bottom: 6rem; } } /* ── Custom cursor (desktop with a mouse, round 51; assets/js/cursor.js) ── */ html.has-cursor, html.has-cursor * { cursor: none !important; } html.has-cursor input, html.has-cursor textarea, html.has-cursor [contenteditable="true"] { cursor: text !important; } .cur-dot, .cur-ring { position: fixed; left: 0; top: 0; z-index: 2147483646; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; } html.cur-on .cur-dot, html.cur-on .cur-ring { opacity: 1; } .cur-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #f3dc9a; box-shadow: 0 0 8px rgba(243,220,154,0.9); } .cur-ring { width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 1px solid rgba(228,201,123,0.75); background: rgba(201,168,76,0.03); transition: opacity 0.3s ease, width 0.3s ease, height 0.3s ease, margin 0.3s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } html.cur-hot .cur-ring { width: 56px; height: 56px; margin: -28px 0 0 -28px; background: rgba(201,168,76,0.12); border-color: #f3dc9a; box-shadow: 0 0 18px rgba(201,168,76,0.45); } html.cur-hot .cur-dot { opacity: 0; } html.cur-down .cur-ring { width: 26px; height: 26px; margin: -13px 0 0 -13px; background: rgba(201,168,76,0.25); } html.cur-text .cur-dot, html.cur-text .cur-ring { opacity: 0 !important; } /* round 54: the "Mr. Gentleman" watermark sits in the middle of every photo, so every crop and zoom stays centred */ img { object-position: center; } .img-frame img, .carousel img, .gal-tile img, .gal-mo img, .story-slide img, .loc-row__img img { object-position: 50% 50%; transform-origin: 50% 50%; } /* round 55: desktop heroes taller, so the whole golden heart of the background is visible */ @media (min-width: 969px) { .page-hero { min-height: max(64vh, 50vw); } .hero { min-height: max(100vh, 52vw); } } /* round 56: desktop footer — the column titles start at the same height as the text under the brand name ("Luxury Massage & Private Escort Services…"): brand row 44px + 1.2rem gap, titles pushed down by the same amount */ @media (min-width: 1081px) { .footer-inner { align-items: start; } .footer-brand { height: 44px; margin-bottom: 1.2rem; } .footer-col { padding-top: calc(44px + 1.2rem + 2px); } } /* ── 18+ / cookie notice (round 59): slim bar like the old WP banner, in the site style; never blocks the page ── */ .adult-banner { padding: 0.85rem 5%; gap: 1.6rem; justify-content: center; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .adult-banner .banner-text { margin: 0; max-width: 760px; text-align: center; font-family: var(--font-sans); font-size: 0.9rem; line-height: 1.55; color: var(--text); } .adult-banner .banner-text a { color: var(--gold-light); text-decoration: none; border-bottom: 1px solid rgba(228,201,123,0.5); font-weight: 400; } .adult-banner .banner-text a:hover { color: #f6e3ae; border-bottom-color: #f3dc9a; } .banner-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0.45rem 1.2rem; cursor: pointer; font-family: var(--font-serif); font-style: italic; font-size: 1.12rem; line-height: 1; white-space: nowrap; text-decoration: none; color: var(--gold-light); background: rgba(20,26,38,0.9); border: 1px solid rgba(201,168,76,0.6); border-radius: 0; transition: border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; } .banner-btn:hover, .banner-btn:focus-visible { color: #f6e3ae; border-color: #f3dc9a; box-shadow: 0 0 14px rgba(201,168,76,0.35); } .banner-btn--yes { background: rgba(201,168,76,0.12); } @media (max-width: 968px) { .adult-banner { flex-direction: column; align-items: stretch; padding: 0.8rem 1rem calc(0.8rem + env(safe-area-inset-bottom, 0px)); gap: 0.6rem; } .adult-banner .banner-text { font-size: 0.82rem; line-height: 1.5; } .banner-buttons { justify-content: center; } .banner-btn { flex: 1 1 0; font-size: 1.05rem; } } /* round 58: touch screens get bigger tap areas for small text links (at least 44px high, Google / WCAG) */ @media (max-width: 1180px) and (pointer: coarse), (max-width: 968px) { .footer-links li { margin-bottom: 0; } .footer-links a { display: inline-block; padding: 0.7rem 0; min-height: 44px; } .service-list li { display: inline-flex; } .service-list a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.15rem; } .service-list ul { gap: 0 1.3rem; } .footer-legal a { display: inline-flex; align-items: center; min-height: 44px; } } /* round 58: the small hints under the Services menu titles a little larger (were 9.6px) */ .regions--menu .region-sub { font-size: 0.7rem; } /* round 59: small phones — brand a little smaller so the menu icon always sits fully inside the screen */ @media (max-width: 480px) { .brand-name, .header-bar.is-scrolled .brand-name { font-size: 1.7rem; } .brand { gap: 8px; min-width: 0; } .menu-icon { padding-right: 0; } } @media (max-width: 370px) { .brand-name, .header-bar.is-scrolled .brand-name { font-size: 1.45rem; } .menu-icon { font-size: 1.5rem; padding-left: 0.2rem; } .brand-logo-img { width: 30px; height: auto; } } /* round 61: while the 18+ bar is open, the chat button sits just above it and the scroll-top button above the chat button, so they never overlap (desktop + phones) */ html.age-bar-on #scroll-top-btn { bottom: calc(var(--banner-h, 110px) + 16px + 58px + 14px) !important; } @media (max-width: 968px) { html.age-bar-on #scroll-top-btn { bottom: calc(var(--banner-h, 110px) + 16px + 64px + 14px) !important; } } /* ════════════════════════════════════════════════════════ ROUND 65 — mobile polish ════════════════════════════════════════════════════════ */ /* 18+ bar: "I am 18+" on the right (markup order), same on every screen */ /* Phones: square heart photo, a bit zoomed out so the whole heart shows; fades into the page below */ @media (max-width: 768px) { .hero-bg-wrap .hero-bg { inset: auto; top: 0; left: -15%; width: 130%; max-width: none; height: auto; aspect-ratio: 1 / 1; object-fit: cover; -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%); mask-image: linear-gradient(to bottom, #000 62%, transparent 100%); } } /* Phones (round 67): NO colour fades at all. Phone screens show soft fades as rings / stripes, so on phones every card, box, button, hero, footer and bar gets ONE even colour. Cards and boxes are a touch lighter than the page; when they light up (scrolling, main.js .is-lit) they turn an even brighter blue, faded in smoothly. */ @media (max-width: 968px) { :root { --m-card: #222a39; --m-card-lit: #1e2533; --m-btn: #1e2533; } /* round 71: lit + buttons = colour of the moving banner on the home page */ /* the old glow layers: off (lux-card::after is re-used below as the flat "lit" layer) */ .lux-card::before, .card::before, .btn::after, .nav-cta::after, .lux-card__frame::before, .booking-cta::before, .divider-glow, .section-fade-top::before, .section-fade-bottom::after { background: none !important; } .section-tinted { background: var(--bg) !important; } /* cards */ .lux-card { background: var(--m-card) !important; } .lux-card::after { background: var(--m-card-lit) !important; opacity: 0; z-index: 0; transition: opacity 0.5s ease; } .lux-card:hover::after, .lux-card:focus-within::after, .lux-card.is-lit::after { opacity: 1; } .card { background: var(--m-card) !important; } .card:hover { background: var(--m-card-lit) !important; } /* boxes: booking boxes, contact panel, "Before we begin", philosophy box, place cards */ .booking-cta__box, .touch-panel, .pricing-notes, .philosophy-box { background: var(--m-card) !important; transition: transform 0.6s ease, box-shadow 0.6s ease, border-color 0.6s ease, background-color 0.6s ease; } .booking-cta__box:hover, .booking-cta__box.is-lit, .touch-panel.is-lit, .pricing-notes.is-lit, .philosophy-box.is-lit { background: var(--m-card-lit) !important; } .touch-panel.is-lit, .pricing-notes.is-lit, .philosophy-box.is-lit { border-color: #f3dc9a; } .regions--home .region { background: var(--m-card) !important; transition: border-color 0.6s ease, box-shadow 0.6s ease, background-color 0.6s ease; } .regions--home .region.is-lit { background: var(--m-card-lit) !important; border-color: rgba(228,201,123,0.6); box-shadow: 0 10px 30px rgba(0,0,0,0.35), 0 0 22px rgba(201,168,76,0.2); } /* buttons: flat; the blue "lit" layer is an even tint */ .btn::before { background: rgba(74,158,224,0.12) !important; } .booking-cta .btn:hover { background: var(--m-card-lit) !important; } /* hero: one even dark veil over the photo; the photo's bottom edge fades out over a short distance */ .hero::before, .page-hero::before { background: rgba(26,32,44,0.62) !important; } .hero-bg-wrap .hero-bg { -webkit-mask-image: linear-gradient(to bottom, #000 84%, transparent 100%); mask-image: linear-gradient(to bottom, #000 84%, transparent 100%); } .marquee { background: #1e2533 !important; } /* footer, contact bar, chat button: even colours */ .site-footer { background: var(--bg) !important; } .mgc-launcher, html.age-bar-on .m-contact .mgc-launcher, html.age-bar-on .m-contact .mgc-launcher.is-teasing { background: #141a26 !important; } .fk-curtain { background: var(--fk-curtain-bg) !important; } } /* Phones: Direct Chat tile gets a light that runs once around its frame now and then */ @property --mgc-ang { syntax: ''; inherits: false; initial-value: 0deg; } @media (max-width: 968px) { .m-contact .mgc-launcher::before { content: ''; position: absolute; inset: -1px; padding: 1.5px; pointer-events: none; z-index: 2; background: conic-gradient(from var(--mgc-ang), transparent 0deg 250deg, rgba(243,220,154,0.15) 280deg, #f6e3ae 330deg, #fffaf0 345deg, rgba(243,220,154,0) 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: 0; animation: mgc-orbit 11s linear 2s infinite; filter: drop-shadow(0 0 4px rgba(243,220,154,0.8)); } @keyframes mgc-orbit { 0% { --mgc-ang: 0deg; opacity: 0; } 2% { opacity: 1; } 24% { opacity: 1; } 27% { --mgc-ang: 720deg; opacity: 0; } 100% { --mgc-ang: 720deg; opacity: 0; } } } @media (max-width: 968px) and (prefers-reduced-motion: reduce) { .m-contact .mgc-launcher::before { animation: none; } } /* Phones: while the 18+ bar is open, the chat button floats above it as the round, breathing button (with the "Let's talk ;)" note) instead of a square tile; back to the tile when the bar is gone */ @media (max-width: 968px) { html.age-bar-on .m-contact .mgc-launcher { justify-self: end; align-self: end; width: 56px; height: 56px; min-height: 0; padding: 0; margin-right: 6px; border-radius: 50%; border: 1.5px solid rgba(201,168,76,0.6); background: linear-gradient(135deg, #131923 0%, #1e2736 100%); animation: mgc-pulse 3.5s ease-in-out infinite; transform: none; bottom: calc(var(--banner-h, 110px) + 12px) !important; } html.age-bar-on .m-contact .mgc-launcher::before { display: none; } html.age-bar-on .m-contact .mgc-launcher .m-contact__label { display: none; } html.age-bar-on .m-contact .mgc-launcher svg { width: 24px; height: 24px; } html.age-bar-on .m-contact .mgc-launcher .m-contact__tease { bottom: auto; top: 50%; left: auto; right: 66px; white-space: nowrap; padding: 0.45rem 0.9rem; background: rgba(20,26,38,0.96); border: 1px solid rgba(201,168,76,0.55); transform: translate(8px, -50%); } html.age-bar-on .m-contact .mgc-launcher.is-teasing { transform: none; background: linear-gradient(135deg, #131923 0%, #1e2736 100%); } html.age-bar-on .m-contact .mgc-launcher.is-teasing .m-contact__tease { transform: translate(0, -50%); } html.age-bar-on .m-contact .mgc-badge { top: -3px; right: -3px; } html.age-bar-on #scroll-top-btn { bottom: calc(var(--banner-h, 110px) + 12px + 56px + 18px + env(safe-area-inset-bottom)) !important; } } /* Phones: footer contact buttons always show their name, in two columns of three, same size + text style as the Facebook / Instagram buttons below them (round 66) */ @media (max-width: 968px) { .footer-col-left .social-row { display: grid; grid-template-columns: repeat(2, 128px); gap: 0.6rem; } /* round 68: compact, all 8 the same size */ .footer-col-left .social-row .social-icon-link, .footer-col-left .social-row .follow-link { width: 100% !important; box-sizing: border-box; } .footer-col-left .social-row:not(.social-row--follow) .social-icon-link { height: 42px; padding: 0 1.1rem 0 0.9rem; gap: 0.55rem; justify-content: flex-start; font-family: var(--font-serif); font-style: italic; font-size: 1.05rem; letter-spacing: 0.03em; text-transform: none; } .footer-col-left .social-row:not(.social-row--follow) .social-icon-link svg { width: 17px; height: 17px; } .footer-col-left .social-row:not(.social-row--follow) .social-label { display: inline; opacity: 1; width: auto; overflow: visible; font-family: var(--font-serif); font-style: italic; font-size: 1.05rem; letter-spacing: 0.03em; text-transform: none; font-weight: 400; color: var(--gold-light); } } /* Phones: footer Services column over the full width, so every service fits on one line */ @media (max-width: 600px) { .footer-inner > .footer-col:last-child { grid-column: 1 / -1; } .footer-inner > .footer-col:last-child .footer-links a { white-space: nowrap; } } /* Phones: hamburger menu — small gold star before the white items under the gold titles, and room at the bottom so the Contact button is never hidden behind the contact bar */ @media (max-width: 1180px) { .regions--menu .region-towns a::before { /* round 66: gold star before the white items under the gold titles */ content: '\2726'; display: inline-block; font-size: 0.5rem; color: var(--gold-dim); margin-right: 0.6rem; vertical-align: 0.2em; font-style: normal; } .nav-list { padding-bottom: calc(2rem + 90px + env(safe-area-inset-bottom)); max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); } /* phones: see round 69 below */ } /* round 65: last list of a section gets no extra bottom margin, so the space above a star divider equals the space below */ .loc-places:last-child, section:has(+ .ornament) .container > :last-child > :last-child:is(ul, ol, p) { margin-bottom: 0; } /* Star divider measuring pass (main.js, round 66): one synchronous frame without reveal offsets, never painted */ html.orn-measure main :not(.hero, .hero *, [data-split] *, [data-unveil] *), html.orn-measure main :not(.hero, .hero *, [data-split] *, [data-unveil] *)::before, html.orn-measure main :not(.hero, .hero *, [data-split] *, [data-unveil] *)::after { transform: none !important; transition: none !important; translate: none !important; } /* (round 72: the home page photo unveil and the rising title words are left alone, so their animation is not cut short on phones) */ /* Phones menu (round 66): the "From Chania to Sitia" link wraps instead of running off the panel */ @media (max-width: 1180px) { .site-nav .mega-all { white-space: normal; line-height: 1.6; max-width: 100%; } } /* ════════ ROUND 68 (phones) ════════ */ /* no grey/blue flash when tapping links and buttons on Android */ a, button, [role="button"], summary, label { -webkit-tap-highlight-color: transparent; } @media (max-width: 968px) { /* footer buttons: all 8 one warm dark colour (a touch of gold, as before, but even - no fade) */ .footer-col-left .social-row .social-icon-link, .footer-col-left .social-row .follow-link { background: linear-gradient(rgba(201,168,76,0.06), rgba(201,168,76,0.06)), rgba(20,26,38,0.95); border-color: rgba(201,168,76,0.45); } .footer-col-left .social-row .social-icon-link::after { display: none; } .footer-col-left .social-row .social-icon-link, .footer-col-left .social-row .follow-link { padding: 0 0.8rem 0 0.85rem !important; } /* photos (round 70: only the first photo of the home page and of each location page): when it lights up, its frame breathes and small stars twinkle on the corners */ .img-frame--sparkle .corner::after { content: '\2726'; position: absolute; width: 18px; height: 18px; text-align: center; font-size: 18px; line-height: 1; color: #fff6dc; pointer-events: none; text-shadow: 0 0 6px rgba(243,220,154,0.95), 0 0 14px rgba(228,201,123,0.7); opacity: 0; transform: scale(0.3) rotate(0deg); } .img-frame--sparkle .corner-tl::after { top: -10px; left: -10px; } .img-frame--sparkle .corner-tr::after { top: -10px; right: -10px; } .img-frame--sparkle .corner-bl::after { bottom: -10px; left: -10px; } .img-frame--sparkle .corner-br::after { bottom: -10px; right: -10px; } .img-frame--sparkle.is-lit .corner::after { animation: frame-twinkle 1.2s ease-in-out infinite; } /* round 69: much faster, round and round */ .img-frame--sparkle.is-lit .corner-tr::after { animation-delay: 0.3s; } .img-frame--sparkle.is-lit .corner-br::after { animation-delay: 0.6s; } .img-frame--sparkle.is-lit .corner-bl::after { animation-delay: 0.9s; } @keyframes frame-twinkle { 0%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); } 12% { opacity: 1; transform: scale(1.2) rotate(60deg); } 30% { opacity: 0; transform: scale(0.4) rotate(140deg); } } .img-frame--sparkle.is-lit::before { animation: frame-breathe 3.2s ease-in-out infinite; } @keyframes frame-breathe { 0%, 100% { box-shadow: 0 0 22px rgba(201,168,76,0.35), 0 0 8px rgba(74,158,224,0.2), inset 0 0 10px rgba(228,201,123,0.15); } 50% { box-shadow: 0 0 38px rgba(228,201,123,0.65), 0 0 12px rgba(74,158,224,0.3), inset 0 0 16px rgba(228,201,123,0.3); } } /* booking boxes: when lit, two small lights chase around the "Discover How to Book" button */ .booking-cta .btn::after { content: ''; position: absolute; inset: 0; padding: 2px; pointer-events: none; z-index: 3; opacity: 0; background: conic-gradient(from var(--bk-ang), transparent 0deg 120deg, #f6e3ae 165deg, #fffaf0 175deg, transparent 180deg 300deg, #f6e3ae 345deg, #fffaf0 355deg, transparent 360deg) !important; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); transition: opacity 0.6s ease; filter: drop-shadow(0 0 3px rgba(243,220,154,0.9)); } .booking-cta__box.is-lit .btn::after { opacity: 1; animation: bk-chase 4s linear infinite; } @keyframes bk-chase { to { --bk-ang: 360deg; } } /* contact bar: slides away while scrolling down, back when scrolling up (main.js sets html.bar-away) */ .m-contact { transition: transform 0.4s ease, opacity 0.4s ease; } html.bar-away:not(.age-bar-on) .m-contact { transform: translateY(110%); opacity: 0; pointer-events: none; } #scroll-top-btn { transition: border-color var(--transition), color var(--transition), opacity var(--transition), visibility var(--transition), box-shadow var(--transition), bottom 0.4s ease; } html.bar-away:not(.age-bar-on) #scroll-top-btn { bottom: calc(18px + env(safe-area-inset-bottom)) !important; } } @property --bk-ang { syntax: ''; inherits: false; initial-value: 0deg; } @media (max-width: 968px) and (prefers-reduced-motion: reduce) { .img-frame--sparkle.is-lit .corner::after, .img-frame--sparkle.is-lit::before, .booking-cta__box.is-lit .btn::after { animation: none; } } /* ════════ ROUND 69 (phones) ════════ */ @media (max-width: 968px) { /* hamburger: same space above and below the Contact button; the panel stops above the contact bar instead of carrying a big empty bottom padding */ .nav-list { padding-bottom: 1.7rem !important; max-height: calc(100vh - 90px - 90px - env(safe-area-inset-bottom)) !important; max-height: calc(100dvh - 90px - 90px - env(safe-area-inset-bottom)) !important; } .nav-list > li:last-child { padding-top: 1.7rem; } /* cards: while lit they breathe, a soft gold ring swells out and fades (like the round chat button) */ .lux-card.is-lit { animation: card-breathe 3.2s ease-in-out infinite; } .regions--home .region.is-lit { animation: region-breathe 3.2s ease-in-out infinite; } /* round 71: a light, tight breath (like the round chat button), no wide halo */ @keyframes card-breathe { 0%, 100% { box-shadow: 0 6px 18px rgba(0,0,0,0.4), 0 0 6px rgba(228,201,123,0.22); } 50% { box-shadow: 0 6px 18px rgba(0,0,0,0.4), 0 0 12px rgba(228,201,123,0.45); } } @keyframes region-breathe { 0%, 100% { box-shadow: 0 6px 18px rgba(0,0,0,0.3), 0 0 6px rgba(228,201,123,0.2); } 50% { box-shadow: 0 6px 18px rgba(0,0,0,0.3), 0 0 12px rgba(228,201,123,0.42); } } } @media (max-width: 968px) and (prefers-reduced-motion: reduce) { .lux-card.is-lit, .regions--home .region.is-lit { animation: none; } } /* ════════ ROUND 70 (phones): "Discover How to Book" button blends with its box; lights up with it ════════ */ @media (max-width: 968px) { .booking-cta .btn { background: var(--m-card) !important; box-shadow: 0 0 10px rgba(201,168,76,0.18); transition: transform 0.6s ease, box-shadow 0.6s ease, border-color 0.6s ease, background-color 0.6s ease; } .booking-cta .btn::before { opacity: 0 !important; } .booking-cta__box.is-lit .btn { background: var(--m-card-lit) !important; box-shadow: 0 0 16px rgba(201,168,76,0.3), 0 0 6px rgba(74,158,224,0.15); } } /* ════════ ROUND 71 (phones): every button one colour = the moving banner on the home page (#1e2533) ════════ */ @media (max-width: 968px) { .btn, .booking-cta .btn, .booking-cta__box.is-lit .btn, .nav-cta, .follow-link, .social-icon-link, .footer-col-left .social-row .social-icon-link, .footer-col-left .social-row .follow-link, .touch-btn, .regions-all__link, .gal-stage__nav, .gal-speed__btn, #scroll-top-btn, .m-contact__item { background: var(--m-btn) !important; } .btn::before, .booking-cta .btn::before { opacity: 0 !important; } /* contact bar: WhatsApp + Telegram lighter, Direct Chat stays dark so it stands out (with its gold light) */ .m-contact__item { background: #2a3345 !important; } .m-contact .mgc-launcher { background: #141a26 !important; } .m-contact .mgc-launcher.is-teasing { background: #141a26 !important; } } /* ════════ ROUND 72 (phones): contact bar - Direct Chat is the brightest tile, WhatsApp + Telegram darker ════════ */ @media (max-width: 968px) { .m-contact__item { background: #141a26 !important; } .m-contact .mgc-launcher, .m-contact .mgc-launcher.is-teasing { background: #2c374b !important; } } /* ════════ ROUND 73 ════════ */ @media (max-width: 1180px) { /* hamburger: "The Full Spectrum of Pleasures" / "From Chania to Sitia" links without a background */ .site-nav .mega-all { background: none !important; } } /* swipe to the next / previous main page (main.js): the page glides out to the side while the curtain falls */ main, .site-footer { transition: transform 0.38s cubic-bezier(.4,0,.2,1), opacity 0.38s ease; } html.swipe-to-next main, html.swipe-to-next .site-footer { transform: translateX(-60px); opacity: 0.4; } html.swipe-to-prev main, html.swipe-to-prev .site-footer { transform: translateX(60px); opacity: 0.4; }