/* ========================================================================== LLOYTS — Live Life On Your Terms Design System Foundation ========================================================================== */ /* -------------------------------------------------------------------------- Fonts Loaded via tags in each page's for performance. See: https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Jost:wght@300;400;500&display=swap -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- CSS Variables -------------------------------------------------------------------------- */ :root { /* Colour palette */ --color-cloud-white: #F7F5F0; /* primary background */ --color-sky-blue-grey: #8FA3B1; /* secondary text, subtle UI */ --color-limestone: #B5B0A8; /* borders, dividers */ --color-ocean-jade: #3D7A6E; /* accent, links, active states */ --color-deep-charcoal: #1C1C1C; /* primary text */ --color-concrete: #6B6B6B; /* secondary text */ --color-driftwood: #A0856C; /* warm accent, hover states */ --color-sea-mist: #D4E0DC; /* light backgrounds, cards */ --color-indigo: #2E3A59; /* hero overlay, dark sections */ /* Typography */ --font-display: "Cormorant Garamond", serif; --font-body: "Jost", sans-serif; /* Type scale */ --text-hero: clamp(64px, 9vw, 96px); --text-section-heading: clamp(36px, 4vw, 48px); --text-body: 18px; --text-caption: 13px; --leading-body: 1.75; --leading-heading: 1.2; --tracking-caption: 0.08em; --tracking-nav: 0.04em; --tracking-hero: 0.02em; /* Spacing */ --content-max-width: 1100px; --section-padding-desktop: 120px; --section-padding-mobile: 72px; --space-xs: 8px; --space-sm: 16px; --space-md: 32px; --space-lg: 48px; --space-xl: 72px; --space-2xl: 120px; /* Motion */ --transition-fade: 0.6s ease; } /* -------------------------------------------------------------------------- Reset & Base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); font-weight: 300; font-size: var(--text-body); line-height: var(--leading-body); color: var(--color-deep-charcoal); background-color: var(--color-cloud-white); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, video { display: block; max-width: 100%; height: auto; } /* -------------------------------------------------------------------------- Typography -------------------------------------------------------------------------- */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 300; line-height: var(--leading-heading); letter-spacing: 0.01em; } h1 { font-size: var(--text-hero); letter-spacing: var(--tracking-hero); } h2 { font-size: var(--text-section-heading); } h3 { font-size: 28px; } p { max-width: 70ch; } a { color: var(--color-ocean-jade); text-decoration: none; transition: color 0.3s ease; } a:hover, a:focus { color: var(--color-driftwood); } .caption, .label { font-size: var(--text-caption); letter-spacing: var(--tracking-caption); text-transform: uppercase; color: var(--color-concrete); } /* -------------------------------------------------------------------------- Layout -------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--content-max-width); margin: 0 auto; padding-left: var(--space-sm); padding-right: var(--space-sm); } section { padding-top: var(--section-padding-mobile); padding-bottom: var(--section-padding-mobile); } @media (min-width: 768px) { section { padding-top: var(--section-padding-desktop); padding-bottom: var(--section-padding-desktop); } } /* -------------------------------------------------------------------------- Navigation -------------------------------------------------------------------------- */ .site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 10; padding: var(--space-md) 0; } .site-header .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-sm); } .site-header .logo { font-family: var(--font-display); font-size: 24px; letter-spacing: 0.06em; color: var(--color-cloud-white); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.25); } .site-header .logo:hover, .site-header .logo:focus { color: var(--color-cloud-white); } .site-nav { display: flex; flex-wrap: wrap; gap: var(--space-md); } .site-nav a { font-family: var(--font-body); font-weight: 300; letter-spacing: var(--tracking-nav); text-transform: uppercase; font-size: var(--text-caption); color: var(--color-cloud-white); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.25); } .site-nav a:hover, .site-nav a:focus { color: var(--color-sea-mist); } .site-nav a.is-active { color: var(--color-ocean-jade); } /* Light variant — for pages without a dark hero behind the header */ .site-header--light { position: static; background-color: var(--color-cloud-white); border-bottom: 1px solid var(--color-limestone); } .site-header--light .logo, .site-header--light .site-nav a { color: var(--color-deep-charcoal); } .site-header--light .site-nav a:hover, .site-header--light .site-nav a:focus { color: var(--color-ocean-jade); } /* -------------------------------------------------------------------------- Hero -------------------------------------------------------------------------- */ .hero { position: relative; height: 100vh; min-height: 560px; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 0; } .hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: hero-ken-burns 40s ease-in-out infinite alternate; } @keyframes hero-ken-burns { from { transform: scale(1); } to { transform: scale(1.08); } } .hero__overlay { position: absolute; inset: 0; background-color: var(--color-indigo); opacity: 0.32; } .hero__content { position: relative; z-index: 2; text-align: center; padding: 0 var(--space-md); } .hero__tagline { color: var(--color-cloud-white); font-weight: 300; font-size: clamp(40px, 6.5vw, 72px); line-height: 1.1; max-width: 20ch; margin: 0 auto; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3); } /* -------------------------------------------------------------------------- Intro -------------------------------------------------------------------------- */ .intro { text-align: center; } .intro p { margin: 0 auto; color: var(--color-concrete); } /* -------------------------------------------------------------------------- Story -------------------------------------------------------------------------- */ .story { padding-top: var(--section-padding-mobile); padding-bottom: var(--section-padding-mobile); } @media (min-width: 768px) { .story { padding-top: var(--section-padding-desktop); padding-bottom: var(--section-padding-desktop); } } .story__content { max-width: 680px; margin: 0 auto; padding-left: var(--space-sm); padding-right: var(--space-sm); } .story__heading { text-align: center; margin-bottom: var(--space-xl); } .story__comic { margin-bottom: var(--space-2xl); } .story__comic-image { display: block; width: 100%; height: auto; } .story__content p { font-size: 17px; line-height: 1.9; margin-bottom: var(--space-md); max-width: none; } .pull-quote { font-family: var(--font-display); font-style: italic; font-size: 32px; line-height: 1.5; color: var(--color-ocean-jade); text-align: center; margin: var(--space-xl) 0; max-width: none; } /* -------------------------------------------------------------------------- Thank You -------------------------------------------------------------------------- */ .thank-you { min-height: 80vh; display: flex; align-items: center; } .thank-you__inner { max-width: 680px; margin: 0 auto; text-align: center; padding-left: var(--space-sm); padding-right: var(--space-sm); } .thank-you__label { margin-bottom: var(--space-sm); } .thank-you__heading { margin-bottom: var(--space-md); } .thank-you__text { color: var(--color-concrete); margin: 0 auto var(--space-2xl); } .thank-you__divider { border: none; border-top: 1px solid var(--color-limestone); margin: 0 0 var(--space-2xl); } .thank-you__quote-label { margin-bottom: var(--space-md); } .thank-you__quote { font-family: var(--font-display); font-style: italic; font-size: 32px; line-height: 1.5; color: var(--color-ocean-jade); max-width: none; margin: 0 auto var(--space-sm); } .thank-you__quote-attribution { font-size: var(--text-caption); letter-spacing: var(--tracking-caption); color: var(--color-concrete); margin-bottom: var(--space-2xl); } .thank-you__back { font-size: var(--text-caption); letter-spacing: var(--tracking-caption); color: var(--color-ocean-jade); } /* -------------------------------------------------------------------------- Quadrant Cards -------------------------------------------------------------------------- */ .quadrants__heading { font-size: var(--text-section-heading); text-align: center; margin-bottom: var(--space-sm); } .quadrants__subheading { text-align: center; } .quadrants__image { display: block; width: 100%; max-width: 700px; margin: var(--space-xl) auto; } /* -------------------------------------------------------------------------- Pillars — Words to Live By -------------------------------------------------------------------------- */ .pillars__heading { text-align: center; margin-bottom: var(--space-xl); } .pillar-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); } @media (min-width: 768px) { .pillar-grid { grid-template-columns: repeat(2, 1fr); } } .pillar-card { background-color: var(--color-sea-mist); border-left: 3px solid var(--color-ocean-jade); padding: var(--space-lg); } .pillar-card__label { margin-bottom: var(--space-sm); } .pillar-card__quote { font-family: var(--font-display); font-style: italic; font-size: 20px; line-height: 1.6; color: var(--color-deep-charcoal); max-width: none; } /* -------------------------------------------------------------------------- Podcast -------------------------------------------------------------------------- */ .podcast { border-top: 1px solid var(--color-limestone); } .podcast__heading { text-align: center; margin-bottom: var(--space-sm); } .podcast__subheading { text-align: center; margin-bottom: var(--space-xl); } .episode-list { display: flex; flex-direction: column; gap: var(--space-lg); } .episode { padding-bottom: var(--space-lg); border-bottom: 1px solid var(--color-limestone); } .episode:last-child { border-bottom: none; padding-bottom: 0; } .episode__title { font-size: 26px; margin-bottom: var(--space-xs); } .episode__guest { margin-bottom: var(--space-sm); } .episode__description { color: var(--color-concrete); margin-bottom: var(--space-sm); } .episode__player { width: 100%; } .episode__player audio { width: 100%; } /* -------------------------------------------------------------------------- Krabi -------------------------------------------------------------------------- */ .krabi-hero-image img { width: 100%; height: auto; display: block; } .krabi-hero-image figcaption { text-align: center; margin-top: var(--space-sm); } @keyframes fade-in-load { from { opacity: 0; } to { opacity: 1; } } .fade-in-load { animation: fade-in-load 1.2s ease; } .krabi__content { max-width: 680px; margin: 0 auto; text-align: center; } .krabi__content h1 { margin-bottom: var(--space-sm); } .krabi__content p { margin: 0 auto var(--space-xl); color: var(--color-concrete); } .krabi-details { margin-bottom: var(--space-xl); } .detail-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); } @media (min-width: 768px) { .detail-grid { grid-template-columns: repeat(3, 1fr); } } .detail-card { position: relative; min-height: 380px; display: flex; flex-direction: column; justify-content: flex-end; border-left: 3px solid var(--color-ocean-jade); padding: var(--space-lg); text-align: left; overflow: hidden; } .detail-card__bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.4s ease; } .detail-card:hover .detail-card__bg { transform: scale(1.05); } .detail-card--stay .detail-card__bg { background-image: url("../assets/images/hako_cabin.jpeg"); } .detail-card--place .detail-card__bg { background-image: url("../assets/images/hero-poster.jpeg"); } .detail-card--included .detail-card__bg { background-image: url("../assets/images/hako_garden.jpeg"); } .detail-card__overlay { position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.45); } .detail-card__label, .detail-card__text { position: relative; z-index: 1; } .detail-card__label { margin-bottom: var(--space-sm); color: rgba(255, 255, 255, 0.7); } .detail-card__text { color: var(--color-cloud-white); max-width: none; } .notify-form { display: flex; flex-direction: column; gap: var(--space-sm); align-items: center; } @media (min-width: 600px) { .notify-form { flex-direction: row; justify-content: center; } } .notify-form__label { display: block; margin-bottom: var(--space-sm); } .notify-form .field { min-width: 280px; } /* -------------------------------------------------------------------------- Shop -------------------------------------------------------------------------- */ .shop__heading { text-align: center; margin-bottom: var(--space-sm); } .shop__intro { text-align: center; margin: 0 auto var(--space-xl); color: var(--color-concrete); } .product-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); } @media (min-width: 768px) { .product-grid { grid-template-columns: repeat(3, 1fr); } } .product-card { background-color: #FFFFFF; padding: var(--space-md); transition: box-shadow 0.3s ease, transform 0.3s ease; } .product-card:hover { box-shadow: 0 12px 32px rgba(28, 28, 28, 0.08); transform: translateY(-2px); } .product-card__image { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; margin-bottom: var(--space-sm); } .product-card__image-flip { position: relative; width: 100%; aspect-ratio: 4 / 5; margin-bottom: var(--space-sm); cursor: pointer; } .product-card__image-flip .product-card__image { position: absolute; inset: 0; margin-bottom: 0; transition: opacity 0.4s ease; } .product-card__image-flip .product-card__image--back { opacity: 0; } .product-card__image-flip:hover .product-card__image--front, .product-card__image-flip.is-flipped .product-card__image--front { opacity: 0; } .product-card__image-flip:hover .product-card__image--back, .product-card__image-flip.is-flipped .product-card__image--back { opacity: 1; } .product-card__name { font-size: 22px; margin-bottom: var(--space-xs); } .product-card__description { font-family: var(--font-body); color: var(--color-concrete); margin-bottom: var(--space-xs); } .product-card__price { font-family: var(--font-body); margin-bottom: var(--space-sm); } .product-card__note { color: var(--color-concrete); max-width: none; } /* -------------------------------------------------------------------------- Thoughts -------------------------------------------------------------------------- */ .thoughts__heading { text-align: center; margin-bottom: var(--space-sm); } .thoughts__intro { text-align: center; margin: 0 auto var(--space-xl); color: var(--color-concrete); } .thoughts-form { max-width: 560px; margin: 0 auto var(--space-2xl); display: flex; flex-direction: column; gap: var(--space-sm); } .thoughts-form label { display: block; margin-bottom: var(--space-xs); } .thoughts-form button { align-self: center; } .wall { background-image: url("../assets/images/noticeboard.png"); background-size: cover; background-position: center; padding: var(--space-xl) var(--space-md); column-count: 1; column-gap: var(--space-md); } @media (min-width: 768px) { .wall { column-count: 3; } } .note { position: relative; background-color: var(--color-cloud-white); color: var(--color-deep-charcoal); padding: var(--space-lg) var(--space-md) var(--space-md); margin-bottom: var(--space-md); break-inside: avoid; box-shadow: 0 6px 16px rgba(28, 28, 28, 0.3); transition: transform 0.3s ease, box-shadow 0.3s ease; } .note::before { content: ""; position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background-color: var(--color-driftwood); } .note:nth-child(3n+1) { transform: rotate(-2deg); } .note:nth-child(3n+2) { transform: rotate(1.5deg); } .note:nth-child(3n) { transform: rotate(-1deg); } .note:nth-child(2) { transform: rotate(2deg); } .note:hover { transform: rotate(0deg); box-shadow: 0 10px 24px rgba(28, 28, 28, 0.4); } .note p { max-width: none; } .note__message { font-family: var(--font-display); font-style: italic; font-size: 19px; line-height: 1.6; margin-bottom: var(--space-sm); } .note__meta { text-align: right; } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .site-footer { padding: var(--space-lg) 0; text-align: center; border-top: 1px solid var(--color-limestone); } .site-footer p { margin: 0 auto; } /* -------------------------------------------------------------------------- Dividers & Cards -------------------------------------------------------------------------- */ hr, .divider { border: none; border-top: 1px solid var(--color-limestone); } .card { background-color: var(--color-sea-mist); border-radius: 4px; padding: var(--space-md); } /* -------------------------------------------------------------------------- Form Fields & Buttons (shared across Krabi and Thoughts forms) -------------------------------------------------------------------------- */ .field { width: 100%; font-family: var(--font-body); font-size: 16px; padding: 14px 18px; border: 1px solid var(--color-limestone); background-color: var(--color-cloud-white); color: var(--color-deep-charcoal); } .field:focus { outline: none; border-color: var(--color-ocean-jade); } textarea.field { resize: vertical; } .btn-outline { font-family: var(--font-body); font-size: var(--text-caption); letter-spacing: var(--tracking-caption); text-transform: uppercase; padding: 14px 28px; border: 1px solid var(--color-ocean-jade); background-color: transparent; color: var(--color-ocean-jade); cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease; } .btn-outline:hover, .btn-outline:focus { background-color: var(--color-ocean-jade); color: var(--color-cloud-white); } /* -------------------------------------------------------------------------- Motion / Fade-in -------------------------------------------------------------------------- */ .fade-in { opacity: 0; transform: translateY(16px); transition: opacity var(--transition-fade), transform var(--transition-fade); } .fade-in.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .fade-in { opacity: 1; transform: none; transition: none; } .hero__media { animation: none; transform: none; } .fade-in-load { animation: none; opacity: 1; } * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }