/* ============================================================================= Greben Boat Tours — Brand tokens. Premium nautical palette derived from logo: deep navy + warm gold + cream. Loaded FIRST u da svi ostali style-ovi (site.css, header.css, etc.) mogu da rade fallback na ove tokene. Koegzistira sa --tr-* tokenima iz tour-detail.css (tour-module specific). Token alias-i (--bc-*) zadržani radi backward compatibility sa postojećim CSS-om; vrijednosti su sada Greben paleta. ============================================================================= */ :root { /* ===================================================================== Greben Premium Nautical palette --------------------------------------------------------------------- Primary = deep navy (anchor, hull, deep water) Accent = warm gold (sand, sunset, sailing brass) Neutral = cream/ivory (sails, foam) ===================================================================== */ /* 2026-05-14: Primary navy match-uje Greben logo wordmark (#0F2547). Prethodno (#1A2F5C) je bio vidno svjetliji od logotipa — sad je brand-consistent svuda gdje se koristi `var(--bc-primary)`. */ --bc-primary: #0F2547; /* deep navy iz logo wordmark-a — headings, primary CTAs */ --bc-primary-dk: #061331; /* hover/active — još tamnije */ --bc-primary-soft: #DDE3EF; /* subtle navy tint backgrounds */ --bc-primary-tint: #EFF2F8; /* lightest navy wash */ --bc-secondary: #C9A871; /* warm gold — accent, hairlines, secondary CTA */ --bc-secondary-dk: #A88955; /* hover gold */ --bc-secondary-soft: #F4ECDB; /* gold tint background */ --bc-sand: #EDE3CC; /* sand cream */ --bc-sand-dk: #D9CBA8; --bc-sand-soft: #FAF5E8; /* lightest cream */ --bc-coral: #BF5B3F; /* accent — discount badges (warm terracotta) */ --bc-coral-soft: #F5DDD2; /* Neutral scale */ --bc-text: #0F2547; /* deep navy text (match logo) */ --bc-text-muted: #4A5B7A; /* slate-navy secondary */ --bc-text-faint: #8593AD; /* faint navy-gray */ --bc-bg: #FFFFFF; /* white base */ --bc-bg-soft: #FAF7F2; /* warm ivory canvas */ --bc-bg-overlay: rgba(15, 37, 71, 0.78); /* navy hero overlay */ --bc-border: #E6E0D2; /* warm beige border */ --bc-border-strong: #C9A871; /* gold strong border (premium accent) */ --bc-divider: rgba(15, 37, 71, 0.10); /* Semantic */ --bc-success: #2E7D5B; --bc-success-soft: #DBEDE4; --bc-warning: #B8862A; --bc-warning-soft: #F7ECCC; --bc-danger: #B83A3A; --bc-danger-soft: #F4D8D8; --bc-info: #0F2547; /* match primary navy */ --bc-info-soft: #DDE3EF; /* ===================================================================== Typography — Premium nautical --------------------------------------------------------------------- Display = Cormorant Garamond (refined serif, anchors premium feel) Body = Inter (modern, neutral, exceptional legibility) ===================================================================== */ /* Unifikovana tipografija — IBM Plex Sans za sve elemente. Display i body tokene zadržavamo (umjesto da ih spojimo) radi backward-compat sa postojećim CSS-om koji ih koristi razdvojeno. */ --bc-font-display: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --bc-font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --bc-font-mono: 'SF Mono', 'Menlo', 'Consolas', 'Liberation Mono', monospace; /* Type scale (modular, 1.25 ratio) */ --bc-fs-xs: 0.75rem; /* 12px */ --bc-fs-sm: 0.875rem; /* 14px */ --bc-fs-base: 1rem; /* 16px */ --bc-fs-md: 1.125rem; /* 18px */ --bc-fs-lg: 1.25rem; /* 20px */ --bc-fs-xl: 1.5rem; /* 24px */ --bc-fs-2xl: 2rem; /* 32px */ --bc-fs-3xl: 2.5rem; /* 40px */ --bc-fs-4xl: clamp(2.25rem, 4vw, 3.5rem); /* hero h1 */ --bc-fs-5xl: clamp(2.75rem, 5vw, 4.5rem); /* mega */ /* Line heights */ --bc-lh-tight: 1.1; --bc-lh-snug: 1.3; --bc-lh-normal: 1.5; --bc-lh-relaxed: 1.7; /* ===================================================================== Spacing scale (4px base) ===================================================================== */ --bc-space-1: 0.25rem; /* 4px */ --bc-space-2: 0.5rem; /* 8px */ --bc-space-3: 0.75rem; /* 12px */ --bc-space-4: 1rem; /* 16px */ --bc-space-5: 1.5rem; /* 24px */ --bc-space-6: 2rem; /* 32px */ --bc-space-7: 3rem; /* 48px */ --bc-space-8: 4rem; /* 64px */ --bc-space-9: 6rem; /* 96px */ --bc-space-10: 8rem; /* 128px */ /* Section padding tokens */ --bc-section-y: clamp(3rem, 6vw, 6rem); --bc-section-y-sm: clamp(2rem, 4vw, 4rem); /* ===================================================================== Radii (Apple-grade scale) ===================================================================== */ --bc-radius-sm: 4px; --bc-radius-md: 8px; --bc-radius-lg: 12px; --bc-radius-xl: 16px; --bc-radius-2xl: 24px; --bc-radius-pill: 999px; /* ===================================================================== Shadows (Apple HIG tier system) ===================================================================== */ --bc-shadow-1: 0 1px 2px rgba(20, 25, 35, 0.04), 0 1px 3px rgba(20, 25, 35, 0.06); --bc-shadow-2: 0 4px 12px rgba(20, 25, 35, 0.06), 0 2px 4px rgba(20, 25, 35, 0.04); --bc-shadow-3: 0 12px 28px rgba(20, 25, 35, 0.10), 0 4px 12px rgba(20, 25, 35, 0.06); --bc-shadow-4: 0 24px 56px rgba(20, 25, 35, 0.14), 0 8px 16px rgba(20, 25, 35, 0.08); --bc-shadow-glow: 0 0 0 4px rgba(201, 168, 113, 0.25); /* ===================================================================== Easings + transitions ===================================================================== */ --bc-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --bc-ease-in: cubic-bezier(0.7, 0, 0.84, 0); --bc-ease-in-out: cubic-bezier(0.83, 0, 0.17, 1); --bc-ease-spring: cubic-bezier(0.5, 1.25, 0.75, 1.25); --bc-transition-fast: 0.15s var(--bc-ease-out); --bc-transition-base: 0.25s var(--bc-ease-out); --bc-transition-slow: 0.4s var(--bc-ease-out); /* ===================================================================== Gradients (brand-specific decorative) ===================================================================== */ --bc-gradient-sunset: linear-gradient(135deg, #C9A871 0%, #A88955 100%); --bc-gradient-sea: linear-gradient(180deg, #0F2547 0%, #061331 100%); --bc-gradient-warm: linear-gradient(135deg, #F4ECDB 0%, #EDE3CC 100%); --bc-gradient-hero: linear-gradient(160deg, rgba(15,37,71,0.55) 0%, rgba(15,37,71,0.20) 45%, rgba(15,37,71,0.75) 100%); /* ===================================================================== Frosted glass ===================================================================== */ --bc-frosted-bg: rgba(255, 255, 255, 0.72); --bc-frosted-blur: blur(20px) saturate(180%); /* ===================================================================== Z-index scale ===================================================================== */ --bc-z-base: 0; --bc-z-dropdown: 100; --bc-z-sticky: 500; --bc-z-fixed: 800; --bc-z-modal-bg: 1040; --bc-z-modal: 1050; --bc-z-toast: 1080; --bc-z-tooltip: 1100; /* ===================================================================== Container widths ===================================================================== */ --bc-container-narrow: 800px; --bc-container-base: 1200px; --bc-container-wide: 1440px; /* ===================================================================== Site-wide layout heights ===================================================================== */ --bc-header-h: 72px; --bc-header-h-mobile: 60px; } /* Reduced motion — disable all transitions/animations for users with prefers-reduced-motion. Apple HIG / WCAG 2.2 compliant. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }