/* Big Voyage – unified design system stylesheet This stylesheet defines a shared set of colors, typography and layout rules for all pages across the Big Voyage static site. It introduces a small design‑system with CSS custom properties (variables) for easy theming. The goal is to provide a cohesive, premium look and feel while retaining flexibility to adjust individual components. Wherever possible the variables are used to override existing inline styles defined in the HTML files. Additional classes (e.g. .mobile-bar or .lang-switcher) are defined to support new UI elements such as the language switcher and sticky bottom bar. */ :root { /* Brand palette */ --color-primary: #0F172A; /* deep navy for core accents */ --color-accent: #0EA5E9; /* calm blue for links & highlights */ --color-success: #10B981; /* positive/confirm actions */ --color-warning: #F59E0B; /* warnings */ --color-error: #EF4444; /* errors */ --color-surface: #FFFFFF; /* cards and backgrounds */ --color-bg: #F8FAFC; /* page background */ --color-text: #0B1220; /* primary text */ --color-muted: #475569; /* secondary text */ --color-border: #e5e7eb; /* subtle borders */ --radius: 16px; /* consistent border radius */ --shadow-sm: 0 3px 10px rgba(0,0,0,0.04); --shadow: 0 6px 20px rgba(0,0,0,0.06); --shadow-lg: 0 8px 24px rgba(0,0,0,0.08); --font-family: 'Inter', 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --container-max: 1120px; /* maximum container width */ --spacing-sm: 8px; --spacing-md: 16px; --spacing-lg: 24px; --spacing-xl: 32px; } /* Reset basics */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-family); line-height: 1.6; color: var(--color-text); background: var(--color-bg); } /* Note / warning message */ .note { color: var(--color-error); font-weight: 600; margin-top: var(--spacing-md); } /* * Language visibility control * * Pages include multiple translations wrapped in elements with the * `.lang-content` class and language suffixes (`.ru`, `.en`, `.hy`). * Hide all language variants by default and reveal only the version * corresponding to the `lang` attribute on ``. The `unset` * display value restores the element's natural display (block or inline). */ .lang-content { display: none; } html[lang='ru'] .lang-content.ru { display: unset; } html[lang='en'] .lang-content.en { display: unset; } html[lang='hy'] .lang-content.hy { display: unset; } /* * Override logo styling * * Enforce the use of the branded image on all `.logo` elements. Some * pages set a black background for `.logo` inline, causing the old * circle to reappear. This override ensures the image is always * visible and hides any fallback text. `!important` is used to * trump inline styles. */ .logo { background: none !important; background-image: url('/assets/logo.jpg') !important; background-size: cover !important; background-position: center !important; color: transparent !important; } /* * Hide header icons * * The navigation links in the header originally displayed small * icons. To simplify the header layout, these icons are hidden. */ .header-link .icon { display: none !important; } /* Quick navigation cards (Excursions & Transfers) */ .quick-links { display: grid; gap: var(--spacing-md); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: var(--spacing-xl) 0; } .quick-card { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--spacing-lg); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); text-decoration: none; color: var(--color-text); box-shadow: var(--shadow-sm); transition: transform 0.15s ease, box-shadow 0.15s ease; } .quick-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .quick-card .icon { width: 48px; height: 48px; border-radius: 999px; display: grid; place-items: center; margin-bottom: var(--spacing-md); color: var(--color-surface); } /* Excursions card uses success colour; transfers uses accent colour */ .quick-card.excursions .icon { background: var(--color-success); } .quick-card.transfers .icon { background: var(--color-accent); } .quick-card .title { font-weight: 700; font-size: 18px; text-align: center; } img { display: block; max-width: 100%; height: auto; } /* Container utility */ .container { max-width: var(--container-max); margin-left: auto; margin-right: auto; padding-left: var(--spacing-md); padding-right: var(--spacing-md); } /* Header and brand */ header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.85); backdrop-filter: blur(8px); border-bottom: 1px solid var(--color-border); } .header-inner { display: flex; align-items: center; justify-content: space-between; padding-top: var(--spacing-sm); padding-bottom: var(--spacing-sm); } .brand { display: flex; align-items: center; gap: var(--spacing-sm); } /* * Ensure all pages display the Big Voyage logo consistently. * Some individual pages define their own `.logo` styles that set a solid * background colour or text. To override these definitions we apply * `!important` on critical properties. We remove any solid colour and * set our company logo as the background image. The text inside the * element is hidden by setting the colour to transparent. */ .logo { width: 36px; height: 36px; border-radius: 999px; /* Clear any existing background colour and apply our logo */ background: none !important; background-image: url('/assets/logo.jpg') !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; color: transparent !important; display: grid; place-items: center; font-weight: 700; font-size: 14px; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-sm); padding: 10px 16px; border-radius: 999px; border: none; background: var(--color-primary); color: var(--color-surface); font-weight: 600; text-decoration: none; transition: background 0.2s ease; cursor: pointer; } .btn:hover { background: #1E293B; /* slightly darker */ } .btn.outline { background: transparent; color: var(--color-primary); border: 1px solid var(--color-primary); } .btn.outline:hover { background: var(--color-primary); color: var(--color-surface); } /* Chips (feature badges) */ .chips { display: flex; gap: var(--spacing-sm); flex-wrap: wrap; } .chip { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,0.8); font-size: 13px; color: var(--color-text); } .chip svg { width: 16px; height: 16px; color: var(--color-accent); } /* Card component */ .card { display: block; text-decoration: none; color: inherit; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; background: var(--color-surface); box-shadow: var(--shadow-sm); transition: transform 0.15s ease, box-shadow 0.15s ease; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .card .thumb { aspect-ratio: 4/3; background: #f3f4f6; overflow: hidden; } .card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .card:hover .thumb img { transform: scale(1.05); } .card-body { padding: 12px 14px; } .card .title { font-weight: 700; font-size: 15px; } /* Grid utility classes */ .grid { display: grid; gap: var(--spacing-md); } .cols-2 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .cols-3 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } .cols-4 { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } /* Mobile sticky bottom bar */ .mobile-bar { display: none; position: fixed; bottom: 0; left: 0; width: 100%; background: var(--color-surface); border-top: 1px solid var(--color-border); padding: var(--spacing-sm) var(--spacing-md); gap: var(--spacing-sm); z-index: 50; } .mobile-bar .btn { flex: 1; font-size: 14px; padding: 8px 12px; } @media (max-width: 640px) { .mobile-bar { display: flex; } } /* Consistent hero gradient overlay across all pages */ .hero-grad { background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0.2), transparent) !important; } /* * Fallback overlay for hero sections. Some pages omit the `.hero-grad` element * or define their own gradient. To ensure that text always remains legible * on top of hero images we add a gradient overlay using a pseudo-element. * This pseudo-element sits behind the hero content but above the image. */ .hero { position: relative; overflow: hidden; } .hero::after { content: ''; position: absolute; inset: 0; /* Use the same gradient as defined for .hero-grad */ background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0.2), transparent); z-index: 1; pointer-events: none; } .hero-content { position: relative; z-index: 2; } /* Ensure hero text is legible on all pages */ .hero-content, .hero-content h1, .hero-content .subtitle { color: #ffffff; text-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); } /* Language switcher */ .lang-switcher { display: flex; align-items: center; gap: 8px; } .lang-switcher button { background: transparent; border: none; color: var(--color-primary); font-weight: 600; padding: 4px 6px; border-radius: 4px; cursor: pointer; transition: background 0.1s ease; } .lang-switcher button.active, .lang-switcher button:hover { background: var(--color-accent); color: var(--color-surface); } /* Header navigation links (excursions & transfers) */ .header-links { display: flex; align-items: center; gap: var(--spacing-md); } .header-link { display: flex; align-items: center; gap: 6px; text-decoration: none; color: var(--color-primary); font-weight: 600; font-size: 14px; } .header-link .icon { /* Hide icons in header links */ display: none; } .header-link.excursions .icon { background: var(--color-success); } .header-link.transfers .icon { background: var(--color-accent); } /* Form helpers */ form .input-group { margin-bottom: var(--spacing-md); } form label { display: block; margin-bottom: 4px; font-weight: 600; color: var(--color-text); } form input, form select, form textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); font-size: 14px; } form input:focus, form select:focus, form textarea:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 2px rgba(14,165,233,0.2); } /* Footer */ footer { border-top: 1px solid var(--color-border); padding-top: var(--spacing-lg); padding-bottom: var(--spacing-xl); font-size: 14px; color: var(--color-muted); background: var(--color-surface); } /* Reviews section */ .reviews-grid { display: grid; gap: var(--spacing-md); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: var(--spacing-lg); } .review { padding: var(--spacing-md); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); box-shadow: var(--shadow-sm); } .review p { margin: 0 0 8px; } .review-author { font-weight: 700; color: var(--color-muted); font-size: 14px; } #reviewForm { margin-top: var(--spacing-lg); display: grid; gap: var(--spacing-md); max-width: 600px; } #reviewForm label { display: block; margin-bottom: 4px; font-weight: 600; color: var(--color-text); } #reviewForm input, #reviewForm textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); font-size: 14px; } #reviewForm textarea { min-height: 120px; resize: vertical; }