/* ======================================================================== foititospoito · shared styles Warm Mediterranean / Airbnb-ish. Greek-first. ======================================================================== */ /* ---------- Design tokens ---------- */ :root{ /* Palette: Terracotta (default). Other palettes override these vars. */ --c-bg: #FAF6EE; --c-surface: #FFFFFF; --c-card: #FFFFFF; --c-ink: #1E1A14; --c-ink-2: #4A4135; --c-muted: #877D6E; --c-line: #E9E1D2; --c-line-2: #F0EADC; --c-primary: #D8694B; /* terracotta */ --c-primary-d: #B85335; --c-primary-soft: #F8E4DA; --c-accent: #2C5F5D; /* sea teal */ --c-accent-soft: #DDEAE6; --c-warn: #C9952A; --c-success: #5C8C4A; --c-photo-1: #C8B79A; --c-photo-2: #A8907A; --c-photo-3: #DCC9A8; /* Type */ --f-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --f-display: "GFS Didot", "Manrope", serif; /* Radii & shadow */ --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px; --r-pill: 999px; --sh-sm: 0 1px 2px rgba(20,16,10,.04), 0 2px 6px rgba(20,16,10,.04); --sh-md: 0 2px 6px rgba(20,16,10,.05), 0 14px 32px -8px rgba(20,16,10,.10); --sh-lg: 0 8px 16px rgba(20,16,10,.06), 0 28px 60px -12px rgba(20,16,10,.18); --max-w: 1240px; } /* Palette presets — applied via [data-palette="..."] on */ html[data-palette="sea"]{ --c-bg: #F3F6F8; --c-surface:#fff; --c-card:#fff; --c-ink:#0E1A24; --c-ink-2:#36495A; --c-muted:#7A8896; --c-line:#E0E7EC; --c-line-2:#EDF1F4; --c-primary:#1F6FA8; --c-primary-d:#155583; --c-primary-soft:#DAE8F2; --c-accent:#E5A446; --c-accent-soft:#F8E8CC; --c-photo-1:#9BB4C6; --c-photo-2:#6F8FA4; --c-photo-3:#C4D4DE; } html[data-palette="olive"]{ --c-bg:#F6F3EA; --c-surface:#fff; --c-card:#fff; --c-ink:#1B1F12; --c-ink-2:#3F4530; --c-muted:#7C8367; --c-line:#E5E1CF; --c-line-2:#EFEBDA; --c-primary:#6F8C3B; --c-primary-d:#566F2C; --c-primary-soft:#E2E9D1; --c-accent:#C36A4F; --c-accent-soft:#F1DDD3; --c-photo-1:#B8C39B; --c-photo-2:#8E9B72; --c-photo-3:#D2D9BC; } html[data-palette="plum"]{ --c-bg:#F5EFEE; --c-surface:#fff; --c-card:#fff; --c-ink:#1B0F18; --c-ink-2:#3F2D38; --c-muted:#85737E; --c-line:#E7DCDB; --c-line-2:#EFE4E3; --c-primary:#7A4663; --c-primary-d:#5C3349; --c-primary-soft:#EFDBE6; --c-accent:#C28A3A; --c-accent-soft:#F0E1C5; --c-photo-1:#BCA9B3; --c-photo-2:#8F7882; --c-photo-3:#D6C5CD; } /* ---------- Reset ---------- */ *,*::before,*::after{box-sizing:border-box} html,body{margin:0;padding:0} html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth } body{ background:var(--c-bg); color:var(--c-ink); font-family:var(--f-sans); font-feature-settings:"ss01","cv11"; font-size:17px; line-height:1.5; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } img,svg{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit} /* ---------- Bilingual visibility ---------- */ .lng-en{display:none} html[lang="en"] .lng-el{display:none} html[lang="en"] .lng-en{display:revert} /* ---------- Layout primitives ---------- */ .wrap{ width:100%; max-width:var(--max-w); margin:0 auto; padding:0 32px } .section{ padding:96px 0 } .section-tight{ padding:64px 0 } .eyebrow{ font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--c-primary); } .h-display{ font-family:var(--f-sans); font-weight:800; letter-spacing:-0.025em; line-height:1.04; margin:0; } .h-1{ font-size:clamp(40px, 5.4vw, 76px) } .h-2{ font-size:clamp(32px, 3.4vw, 52px); letter-spacing:-0.02em; line-height:1.08 } .h-3{ font-size:clamp(22px, 2vw, 28px); letter-spacing:-0.015em; line-height:1.18 } .h-italic{ font-family:var(--f-display); font-style:italic; font-weight:400; letter-spacing:-0.005em; } .lead{ font-size:20px; color:var(--c-ink-2); line-height:1.5; margin:0 } .muted{ color:var(--c-muted) } /* ---------- Buttons ---------- */ .btn{ display:inline-flex; align-items:center; gap:8px; height:52px; padding:0 22px; border-radius:var(--r-pill); font-weight:600; font-size:16px; border:1px solid transparent; cursor:default; transition:transform .15s ease, background .15s ease, color .15s ease, border .15s ease; white-space:nowrap; } .btn-primary{ background:var(--c-ink); color:var(--c-bg) } .btn-primary:hover{ background:var(--c-primary); color:#fff } .btn-accent{ background:var(--c-primary); color:#fff } .btn-accent:hover{ background:var(--c-primary-d) } .btn-ghost{ background:transparent; color:var(--c-ink); border-color:var(--c-line) } .btn-ghost:hover{ background:var(--c-surface); border-color:var(--c-ink) } .btn-sm{ height:40px; font-size:14px; padding:0 16px } .btn-lg{ height:60px; font-size:18px; padding:0 30px } /* ---------- Cards ---------- */ .card{ background:var(--c-card); border-radius:var(--r-md); border:1px solid var(--c-line); } /* ---------- Photo placeholders (treated as intentional design) ---------- */ .photo{ position:relative; background:linear-gradient(135deg, var(--c-photo-1), var(--c-photo-2)); overflow:hidden; border-radius:var(--r-md); } .photo::after{ content:""; position:absolute; inset:0; background: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.35), transparent 55%), radial-gradient(ellipse at 80% 90%, rgba(0,0,0,.18), transparent 60%); pointer-events:none; } .photo-tag{ position:absolute; left:14px; bottom:14px; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:#fff; opacity:.85; background:rgba(0,0,0,.32); padding:5px 10px; border-radius:var(--r-pill); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); z-index:2; } /* SVG hero illustrations are drawn inline, but for stock-feel placeholders we provide a few "scene" decorators ridden inside .photo */ .scene-window{ background: linear-gradient(180deg, transparent 0%, transparent 60%, rgba(0,0,0,.18) 100%), linear-gradient(135deg, var(--c-photo-3) 0%, var(--c-photo-1) 100%); } .scene-bedroom{ background: linear-gradient(180deg, rgba(255,255,255,.15), transparent 40%), linear-gradient(135deg, var(--c-photo-2) 0%, var(--c-photo-1) 60%, var(--c-photo-3) 100%); } .scene-balcony{ background: linear-gradient(180deg, #BFD9DD 0%, #DCC9A8 65%, #A8907A 100%); } .scene-kitchen{ background: linear-gradient(135deg, #E5D2B8 0%, #C8B79A 70%, #877761 100%); } .scene-livingroom{ background: linear-gradient(135deg, #D8C0A4 0%, #BFA386 100%); } .scene-street{ background: linear-gradient(180deg, #E5DBC2 0%, #C9B797 60%, #6E5E45 100%); } .scene-acropolis{ background: linear-gradient(180deg, #BBC9CE 0%, #D8C9A4 60%, #C29568 100%); } /* Accessibility helper */ .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}