/* ═══════════════════════════════════════════════════════════════ ARANKA — styles.css Boutique hotel landing page, Budva, Montenegro. Table of contents 1. Design tokens 2. Reset & base 3. Typography 4. Layout utilities 5. Buttons 6. Navigation / site header 7. Stripe bar (decorative brand element) 8. Hero 9. About 10. Rooms 11. Amenities strip 12. Jaza 13. Location 14. Contact / Book Now 15. Footer 16. Placeholders (dev-only — remove after real images land) 17. Fade-in animation (JS-driven via IntersectionObserver) 18. Responsive ═══════════════════════════════════════════════════════════════ */ /* ──────────────────────────────────────────────────────────── 1. Design tokens ──────────────────────────────────────────────────────────── */ :root { /* ─ Brand palette (from WEBSITE.pdf) ─ */ --c-white: #FFFFFF; --c-black: #000000; --c-cream: #F7F6EA; --c-sand: #C8B39C; --c-gold: #F3DC96; --c-sky: #C2DBE8; --c-brown: #653B25; /* ─ Semantic roles ─ */ --bg: var(--c-white); --bg-cream: var(--c-cream); --bg-dark: var(--c-brown); --text: var(--c-black); --text-2: #3d3830; --text-3: #7a7060; --text-inv: var(--c-cream); --border: #ddd8cc; --accent: var(--c-brown); /* ─ Typography ─ Brand: Condor (display) + Acumin (body). Currently served by: Cormorant + DM Sans (Google Fonts). To swap: update the two values below and remove the Google Fonts in , replacing with the Typekit embed. */ --font-display: 'Cormorant', Georgia, 'Times New Roman', serif; --font-ui: 'DM Sans', system-ui, -apple-system, sans-serif; /* ─ Scale ─ */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-md: 1.125rem; --text-lg: 1.25rem; --text-xl: 1.5rem; --text-2xl: 2rem; --text-3xl: 2.75rem; --text-4xl: 3.5rem; --text-hero: clamp(2.8rem, 5.5vw, 5.2rem); /* ─ Space ─ */ --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.25rem; --s6: 1.5rem; --s8: 2rem; --s10: 2.5rem; --s12: 3rem; --s16: 4rem; --s20: 5rem; --s24: 6rem; /* ─ Layout ─ */ --max-w: 1200px; --pad-x: clamp(1.25rem, 4vw, 2.5rem); --section-py: clamp(4rem, 8vw, 7rem); /* ─ Misc ─ */ --radius: 6px; --radius-lg: 16px; --ease: cubic-bezier(0.16, 1, 0.3, 1); --dur: 0.4s; --nav-h: 68px; } /* ──────────────────────────────────────────────────────────── 2. Reset & base ──────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); -webkit-text-size-adjust: 100%; } body { font-family: var(--font-ui); font-size: var(--text-base); line-height: 1.7; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; } img, video { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } ul[role="list"] { list-style: none; } button { cursor: pointer; border: none; background: none; font: inherit; } address { font-style: normal; } :focus-visible { outline: 2px solid var(--c-brown); outline-offset: 3px; } /* ──────────────────────────────────────────────────────────── 3. Typography ──────────────────────────────────────────────────────────── */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 300; line-height: 1.1; letter-spacing: -0.015em; } p { max-width: 62ch; color: var(--text-2); } strong { font-weight: 500; color: var(--text); } /* Eyebrow / overline label */ .eyebrow { display: block; font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); margin-bottom: var(--s4); } .eyebrow--light { color: rgba(247,246,234,.5); } /* Section heading */ .section-heading { font-size: clamp(var(--text-2xl), 3.5vw, var(--text-4xl)); color: var(--text); margin-bottom: var(--s6); } /* Pull quote / blockquote */ .pull-quote { font-family: var(--font-display); font-size: clamp(var(--text-lg), 2vw, var(--text-xl)); font-style: italic; font-weight: 300; line-height: 1.55; color: var(--c-brown) !important; border-left: 3px solid var(--c-sand); padding-left: var(--s6); margin-block: var(--s6); } /* ──────────────────────────────────────────────────────────── 4. Layout utilities ──────────────────────────────────────────────────────────── */ .container { width: 100%; max-width: var(--max-w); margin-inline: auto; padding-inline: var(--pad-x); } .section { padding-block: var(--section-py); } .section--cream { background: var(--bg-cream); } /* ──────────────────────────────────────────────────────────── 5. Buttons ──────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: var(--s2); padding: 0.75rem 2rem; font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; border-radius: var(--radius); border: 1px solid transparent; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); white-space: nowrap; cursor: pointer; } /* Dark brown on cream bg */ .btn--primary { background: var(--c-brown); color: var(--c-cream); border-color: var(--c-brown); } .btn--primary:hover { background: #4e2d1c; border-color: #4e2d1c; } /* Outlined dark */ .btn--ghost { background: transparent; color: var(--text); border-color: var(--text); } .btn--ghost:hover { background: var(--text); color: var(--c-cream); } /* Brown outline on cream / white bg */ .btn--outline { background: transparent; color: var(--c-brown); border-color: var(--c-sand); } .btn--outline:hover { background: var(--c-brown); color: var(--c-cream); border-color: var(--c-brown); } /* Cream on dark bg */ .btn--light { background: var(--c-cream); color: var(--c-brown); border-color: var(--c-cream); } .btn--light:hover { background: var(--c-white); border-color: var(--c-white); } /* Ghost on dark bg */ .btn--ghost-light { background: transparent; color: var(--c-cream); border-color: rgba(247,246,234,.45); } .btn--ghost-light:hover { background: rgba(247,246,234,.12); border-color: var(--c-cream); } /* ──────────────────────────────────────────────────────────── 6. Navigation / site header ──────────────────────────────────────────────────────────── */ .site-header { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 200; height: var(--nav-h); display: flex; align-items: center; background: rgba(247,246,234,0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); transition: box-shadow var(--dur); } .site-header.is-scrolled { box-shadow: 0 2px 24px rgba(101,59,37,.08); } .nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s8); } .nav__logo img { height: 26px; width: auto; } .nav__links { display: flex; align-items: center; gap: var(--s8); list-style: none; } .nav__links a { font-size: var(--text-sm); color: var(--text-3); letter-spacing: 0.02em; transition: color var(--dur); } .nav__links a:hover { color: var(--text); } .nav__cta { padding: var(--s2) var(--s6) !important; background: var(--c-brown) !important; color: var(--c-cream) !important; border-radius: var(--radius); font-size: 0.7rem !important; letter-spacing: 0.12em; text-transform: uppercase; } .nav__cta:hover { background: #4e2d1c !important; color: var(--c-cream) !important; } /* Mobile hamburger */ .nav__toggle { display: none; flex-direction: column; gap: 5px; padding: var(--s2); color: var(--text-3); } .nav__toggle span { display: block; width: 22px; height: 1.5px; background: currentColor; transition: transform var(--dur), opacity var(--dur); } .nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* ──────────────────────────────────────────────────────────── 7. Stripe bar (brand horizontal stripe pattern) ──────────────────────────────────────────────────────────── */ .stripe-bar { display: flex; height: 7px; width: 100%; flex-shrink: 0; } /* children get flex via inline style on the element */ /* ──────────────────────────────────────────────────────────── 8. Hero ──────────────────────────────────────────────────────────── */ .hero { display: flex; flex-direction: column; min-height: 100svh; padding-top: var(--nav-h); background: var(--bg-cream); position: relative; overflow: hidden; } /* stripe is first child of hero, pinned at top */ .hero > .stripe-bar { flex-shrink: 0; } .hero__layout { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s16); align-items: center; padding-block: clamp(3rem, 8vh, 6rem); } /* ─ Copy column ─ */ .hero__copy { display: flex; flex-direction: column; align-items: flex-start; } .hero__headline { font-size: var(--text-hero); font-weight: 300; letter-spacing: -0.025em; line-height: 1.06; color: var(--text); margin-bottom: var(--s6); } .hero__sub { font-size: var(--text-md); color: var(--text-3); max-width: 44ch; line-height: 1.65; margin-bottom: var(--s10); } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--s4); margin-bottom: var(--s12); } .hero__stats { display: flex; gap: var(--s10); list-style: none; border-top: 1px solid var(--border); padding-top: var(--s6); width: 100%; } .stat-number { display: block; font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 300; letter-spacing: -0.03em; color: var(--c-brown); } .stat-label { display: block; font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); margin-top: var(--s1); } /* ─ Visual column (placeholder / real image) ─ */ .hero__visual { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/5; max-height: 600px; } .hero__visual img { width: 100%; height: 100%; object-fit: cover; } /* Stripe-based placeholder until real photography arrives */ .hero__visual-placeholder { width: 100%; height: 100%; position: relative; display: flex; align-items: center; justify-content: center; } .hvp__stripe-stack { position: absolute; inset: 0; display: flex; flex-direction: column; } .hvp__label { position: relative; z-index: 1; text-align: center; background: rgba(247,246,234,.7); backdrop-filter: blur(6px); padding: var(--s4) var(--s8); border-radius: var(--radius); } .hvp__label p { font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); max-width: none; line-height: 1.8; } /* ──────────────────────────────────────────────────────────── 9. About ──────────────────────────────────────────────────────────── */ .about__inner { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(var(--s10), 6vw, var(--s24)); align-items: start; } /* image column */ .about__image-col { position: relative; } .about__img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--radius-lg); display: block; } .about__stripe-accent { display: flex; height: 6px; border-radius: 0 0 var(--radius) var(--radius); overflow: hidden; margin-top: 0; } .about__stripe-accent span { flex: 1; } /* text column */ .about__text-col { display: flex; flex-direction: column; gap: var(--s5); padding-top: var(--s4); } .about__text-col p { max-width: 52ch; } /* ──────────────────────────────────────────────────────────── 10. Rooms ──────────────────────────────────────────────────────────── */ .rooms__header { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s8); margin-bottom: var(--s12); flex-wrap: wrap; } .rooms__intro { max-width: 44ch; font-size: var(--text-md); color: var(--text-3); text-align: right; padding-bottom: var(--s2); } .rooms__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s8); margin-bottom: var(--s16); } /* ─ Card ─ */ .room-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); } .room-card:hover { box-shadow: 0 16px 48px rgba(101,59,37,.13); transform: translateY(-4px); } .room-card__img { position: relative; aspect-ratio: 4/3; overflow: hidden; flex-shrink: 0; } .room-card__img img, .room-card__img .placeholder { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); } .room-card:hover .room-card__img img, .room-card:hover .room-card__img .placeholder { transform: scale(1.04); } .room-card__view-badge { position: absolute; bottom: var(--s3); left: var(--s3); background: rgba(247,246,234,.88); backdrop-filter: blur(6px); color: var(--text-2); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; padding: var(--s1) var(--s3); border-radius: calc(var(--radius) - 2px); } .room-card__view-badge--sea { background: rgba(194,219,232,.92); color: #1a4258; } .room-card__body { padding: var(--s6); display: flex; flex-direction: column; gap: var(--s3); flex: 1; } .room-card__header { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); } .room-card__name { font-size: var(--text-xl); font-weight: 300; } .room-card__size { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 300; color: var(--text-3); white-space: nowrap; max-width: none; } .room-card__tags { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); list-style: none; } .room-card__tags li { font-size: var(--text-xs); letter-spacing: 0.06em; color: var(--text-3); background: var(--bg-cream); padding: 2px var(--s3); border-radius: 99px; } .room-card__desc { font-size: var(--text-sm); color: var(--text-3); flex: 1; max-width: 40ch; } .room-card__body .btn { align-self: flex-start; margin-top: auto; padding-top: var(--s4); } /* Room placeholder tints — distinct per type, using brand palette */ .r-color-1 { background: linear-gradient(160deg, #ede8d8 0%, #ddd4b8 100%); } /* warm cream */ .r-color-2 { background: linear-gradient(160deg, #c2dbe8 0%, #a8cedd 100%); } /* sky / sea */ .r-color-3 { background: linear-gradient(160deg, #f3dc96 0%, #e8cc78 100%); } /* gold */ .r-color-4 { background: linear-gradient(160deg, #c8b39c 0%, #b09a82 100%); } /* sand */ /* ──────────────────────────────────────────────────────────── 11. Amenities strip ──────────────────────────────────────────────────────────── */ .amenities { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s4) var(--s8); border-top: 1px solid var(--border); padding-top: var(--s8); } .amenities__label { font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; flex-shrink: 0; max-width: none; } .amenities__list { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); list-style: none; font-size: var(--text-sm); color: var(--text-3); } .amenities__list li::before { content: '— '; color: var(--c-sand); } /* ──────────────────────────────────────────────────────────── 12. Jaza ──────────────────────────────────────────────────────────── */ .jaza { display: grid; grid-template-columns: 1fr 1fr; } .jaza__media { overflow: hidden; /* no padding — bleeds to edge */ } .jaza__media img, .jaza__media .placeholder { width: 100%; height: 100%; object-fit: cover; } .jaza__body { background: var(--c-brown); display: flex; align-items: center; } .jaza__content { padding: clamp(var(--s12), 6vw, var(--s24)); display: flex; flex-direction: column; gap: var(--s5); } .jaza__heading { font-size: clamp(var(--text-3xl), 5vw, 5rem); color: var(--c-cream); } .jaza__content .eyebrow { color: var(--c-sand); } .jaza__content p { color: rgba(247,246,234,.75); max-width: 42ch; } .jaza__stripe { display: flex; height: 5px; margin-top: var(--s4); } .jaza__stripe span { flex: 1; } /* ──────────────────────────────────────────────────────────── 13. Location ──────────────────────────────────────────────────────────── */ .location__inner { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(var(--s10), 6vw, var(--s20)); align-items: center; } .location__facts { display: flex; flex-direction: column; gap: 0; margin-top: var(--s6); border-top: 1px solid var(--border); list-style: none; } .location__facts li { display: flex; flex-direction: column; padding: var(--s5) 0; border-bottom: 1px solid var(--border); } .fact-value { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 300; color: var(--c-brown); letter-spacing: -0.02em; } .fact-desc { font-size: var(--text-sm); color: var(--text-3); margin-top: var(--s1); } .location__address { font-size: var(--text-sm); color: var(--text-3); margin-top: var(--s6); padding-top: var(--s6); border-top: 1px solid var(--border); max-width: none; } .location__map { border-radius: var(--radius-lg); overflow: hidden; } .location__map iframe { display: block; width: 100%; min-height: 440px; border: 0; } /* ──────────────────────────────────────────────────────────── 14. Contact / Book Now ──────────────────────────────────────────────────────────── */ .contact { background: var(--c-brown); color: var(--c-cream); display: flex; flex-direction: column; } .contact > .stripe-bar { flex-shrink: 0; } .contact__inner { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding-block: var(--section-py); gap: var(--s6); } .contact__heading { font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl)); color: var(--c-cream); max-width: 14ch; } .contact__sub { font-size: var(--text-md); color: rgba(247,246,234,.65); max-width: 48ch; text-align: center; } .contact__actions { display: flex; flex-wrap: wrap; gap: var(--s4); justify-content: center; margin-top: var(--s4); } /* ──────────────────────────────────────────────────────────── 15. Footer ──────────────────────────────────────────────────────────── */ .site-footer { background: var(--c-brown); color: var(--c-cream); } .footer__inner { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--s12); padding-block: var(--s12); border-bottom: 1px solid rgba(247,246,234,.12); } .footer__brand { display: flex; flex-direction: column; gap: var(--s4); } /* Invert dark logo to show on brown bg */ .footer__logo { filter: invert(1) sepia(1) saturate(0) brightness(2); opacity: .8; } .footer__address, .footer__email { font-size: var(--text-sm); color: rgba(247,246,234,.55); line-height: 1.7; max-width: none; } .footer__email { transition: color var(--dur); } .footer__email:hover { color: var(--c-cream); } .footer__nav ul { display: flex; flex-direction: column; gap: var(--s3); list-style: none; } .footer__nav a { font-size: var(--text-sm); color: rgba(247,246,234,.55); transition: color var(--dur); } .footer__nav a:hover { color: var(--c-cream); } .footer__legal { font-size: var(--text-xs); color: rgba(247,246,234,.3); padding-block: var(--s6); max-width: none; } /* ──────────────────────────────────────────────────────────── 16. Placeholders Dev-only. These show tinted boxes where real photos will go. Remove entire block once real images are in assets/. ──────────────────────────────────────────────────────────── */ .placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 240px; background: linear-gradient(135deg, var(--c-sand) 0%, var(--c-cream) 100%); } .placeholder span { font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); text-align: center; padding: var(--s4); line-height: 1.8; } .placeholder--portrait { min-height: 460px; } .placeholder--landscape { min-height: 440px; } .placeholder--map { min-height: 440px; background: linear-gradient(135deg, #d0e8f3 0%, #c2dbe8 100%); border-radius: var(--radius-lg); } .placeholder--room { min-height: 0; height: 100%; } /* ──────────────────────────────────────────────────────────── 17. Fade-in (JS-driven IntersectionObserver) ──────────────────────────────────────────────────────────── */ .fade-in { opacity: 0; transform: translateY(22px); transition: opacity 0.65s var(--ease), transform 0.65s var(--ease); } .fade-in.is-visible { opacity: 1; transform: none; } /* Staggered delay for hero children */ .hero__copy .fade-in:nth-child(1) { transition-delay: 0.05s; } .hero__copy .fade-in:nth-child(2) { transition-delay: 0.15s; } .hero__copy .fade-in:nth-child(3) { transition-delay: 0.25s; } .hero__copy .fade-in:nth-child(4) { transition-delay: 0.35s; } .hero__copy .fade-in:nth-child(5) { transition-delay: 0.45s; } /* Stagger grid cards */ .rooms__grid .room-card:nth-child(2) { transition-delay: 0.08s; } .rooms__grid .room-card:nth-child(3) { transition-delay: 0.16s; } .rooms__grid .room-card:nth-child(4) { transition-delay: 0.24s; } /* ──────────────────────────────────────────────────────────── 18. Responsive ──────────────────────────────────────────────────────────── */ /* ── Tablet ≤ 960px ── */ @media (max-width: 960px) { /* Hero */ .hero__layout { grid-template-columns: 1fr; gap: var(--s10); } .hero__visual { max-height: 420px; aspect-ratio: 16/9; } /* About */ .about__inner { grid-template-columns: 1fr; } .about__image-col { max-width: 500px; } /* Jaza */ .jaza { grid-template-columns: 1fr; } .jaza__media { min-height: 360px; } /* Location */ .location__inner { grid-template-columns: 1fr; } /* Footer */ .footer__inner { grid-template-columns: 1fr 1fr; } .footer__misc { grid-column: 1 / -1; } } /* ── Mobile ≤ 640px ── */ @media (max-width: 640px) { /* Nav */ .nav__links { display: none; position: fixed; inset: var(--nav-h) 0 0 0; flex-direction: column; align-items: flex-start; gap: var(--s6); background: var(--bg-cream); padding: var(--s8) var(--pad-x); overflow-y: auto; z-index: 150; } .nav__links.is-open { display: flex; } .nav__links a { font-size: var(--text-lg); } .nav__toggle { display: flex; } /* Hero */ .hero__actions { flex-direction: column; align-items: flex-start; } .hero__stats { gap: var(--s8); } /* Rooms */ .rooms__grid { grid-template-columns: 1fr; } .rooms__header { flex-direction: column; align-items: flex-start; } .rooms__intro { text-align: left; } /* Amenities */ .amenities { flex-direction: column; gap: var(--s4); } /* Contact */ .contact__actions { flex-direction: column; align-items: center; } .contact__actions .btn { width: 100%; max-width: 320px; justify-content: center; } /* Footer */ .footer__inner { grid-template-columns: 1fr; gap: var(--s8); } }