/* ========================================================================== Luxury Car Rental Phuket — base.css Design tokens, reset, typography, layout primitives, utilities. Font sizing uses the 62.5% technique: 1rem = 10px. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Design tokens (semantic CSS variables) -------------------------------------------------------------------------- */ :root { /* Brand colours */ --color-brand: #bfa37c; /* primary gold */ --color-brand-strong: #ab8965; /* darker gold */ /* Surfaces */ --color-bg: #000000; /* page background */ --color-surface-1: #141a1c; /* .section-surface-1 */ --color-surface-2: #0b1315; /* .section-surface-2 */ --color-surface-dark: #181818; /* footer / dark sections */ /* Text */ --color-text: #a6a6a6; --color-text-soft: rgba(255, 255, 255, 0.6); --color-heading: #ffffff; --color-white: #ffffff; --color-black: #000000; /* Lines / borders */ --color-border: rgba(255, 255, 255, 0.1); --color-border-strong: rgba(255, 255, 255, 0.25); /* Typography */ --title-font: "Marcellus", Helvetica, Arial, sans-serif; --body-font: "Jost", Helvetica, Arial, sans-serif; --fw-heading: 400; /* Type scale (px shown in comments; 1rem = 10px) */ --fs-body: 1.6rem; /* 16px */ --fs-h1: 6.4rem; /* 64px */ --fs-h2: 3.6rem; /* 46px */ --fs-h3: 2.6rem; /* 26px */ --fs-h4: 2.2rem; /* 22px */ --fs-h5: 1.8rem; /* 18px */ --fs-h6: 1.4rem; /* 14px */ --fs-menu: 1.5rem; /* 15px */ --fs-small: 1.4rem; /* 14px */ --lh-body: 1.7; /* Layout */ --container-pad: 1.5rem; /* gutter each side */ --gap: 3rem; /* default grid gap (30px) */ --section-space: 6rem; /* 60px vertical rhythm */ /* Motion */ --ease: 0.3s ease; --ease-slow: 0.5s ease; } @media (min-width: 768px) { :root { --section-space: 7.2rem; } } @media (min-width: 992px) { :root { --section-space: 9.6rem; } } @media (min-width: 1024px) { :root { --fs-h2: 4.6rem; } } @media (min-width: 1200px) { :root { --section-space: 12rem; } } /* -------------------------------------------------------------------------- 1a. Thai language typography (Polylang /th) On Thai pages , swap the title/body fonts to IBM Plex Sans Thai. Latin characters keep Marcellus/Jost (they come first in the stack); Thai glyphs, which those fonts lack, fall through to IBM Plex Sans Thai. Because the whole theme reads these two variables, this one override reaches every heading and paragraph automatically. Other languages are untouched. -------------------------------------------------------------------------- */ html[lang^="th"] { --title-font: "Marcellus", "IBM Plex Sans Thai", Helvetica, Arial, sans-serif; --body-font: "Jost", "IBM Plex Sans Thai", Helvetica, Arial, sans-serif; } /* -------------------------------------------------------------------------- 2. Modern reset -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 62.5%; /* 1rem = 10px */ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--body-font); font-size: var(--fs-body); font-weight: 400; line-height: var(--lh-body); color: var(--color-text); background-color: var(--color-bg); overflow-x: hidden; } img, picture, svg, video, iframe { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; transition: color var(--ease); } ul, ol { margin: 0; padding: 0; list-style: none; } button, input, select, textarea { font: inherit; color: inherit; } hr { border: 0; border-top: 1px solid var(--color-border); margin: 2rem 0 3.6rem; } /* -------------------------------------------------------------------------- 3. Typography -------------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { margin: 0 0 1rem; font-family: var(--title-font); font-weight: var(--fw-heading); color: var(--color-heading); letter-spacing: 0; } h1 { font-size: var(--fs-h1); line-height: 1.15; margin-bottom: 2rem; } h2 { font-size: var(--fs-h2); line-height: 1.2; margin-bottom: 3rem; text-transform: capitalize; } h3 { font-size: var(--fs-h3); line-height: 1.5; } h4 { font-size: var(--fs-h4); line-height: 1.6; } h5 { font-size: var(--fs-h5); line-height: 1.6; } h6 { font-size: var(--fs-h6); line-height: 1.6; } p { margin: 0 0 1.6rem; } p:last-child { margin-bottom: 0; } strong, b { font-weight: 600; } /* -------------------------------------------------------------------------- 4. Layout primitives — container & responsive grid (replaces Bootstrap) -------------------------------------------------------------------------- */ .container { width: 100%; max-width: 540px; margin-inline: auto; padding-inline: var(--container-pad); } @media (min-width: 768px) { .container { max-width: 720px; } } @media (min-width: 992px) { .container { max-width: 960px; } } @media (min-width: 1200px) { .container { max-width: 1140px; } } @media (min-width: 1400px) { .container { max-width: 1320px; } } /* Reusable auto-fit / fixed grids used by the templates */ .grid { display: grid; gap: var(--gap); } .grid--2 { display: grid; gap: var(--gap); grid-template-columns: 1fr; } .grid--auto { display: grid; gap: var(--gap); grid-template-columns: 1fr; } @media (min-width: 768px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--auto { grid-template-columns: repeat(2, 1fr); } } /* Flexbox grid shim — supports Bootstrap-style markup coming from the CMS (page content & widgets) without loading Bootstrap itself. Mobile-first: columns are full width, then take their percentage from the -md/-lg breakpoint. */ .row { display: flex; flex-wrap: wrap; margin-inline: -1.5rem; } .row > * { width: 100%; padding-inline: 1.5rem; } .row.g-4 { row-gap: 3rem; } .row.g-3 { row-gap: 2rem; } @media (min-width: 768px) { .col-md-6 { width: 50%; } .col-md-4 { width: 33.3333%; } .col-md-3 { width: 25%; } .col-md-12 { width: 100%; } } @media (min-width: 992px) { .col-lg-12 { width: 100%; } .col-lg-8 { width: 66.6667%; } .col-lg-6 { width: 50%; } .col-lg-4 { width: 33.3333%; } .col-lg-3 { width: 25%; } .offset-lg-2 { margin-left: 16.6667%; } } /* -------------------------------------------------------------------------- 5. Utility helpers (only the ones the markup / CMS actually use) -------------------------------------------------------------------------- */ .text-center { text-align: center; } .text-white { color: var(--color-white); } .text-light { color: var(--color-text-soft); } .text-gold { color: var(--color-brand); } .d-flex { display: flex; } .align-items-center { align-items: center; } .relative { position: relative; } .overflow-hidden { overflow: hidden; } .bg-surface-1 { background-color: var(--color-surface-1); } .bg-surface-2 { background-color: var(--color-surface-2); } .bg-dark { background-color: var(--color-surface-dark); } .bg-gold { background-color: var(--color-brand-strong); } /* Vertical rhythm helpers */ .space-y { padding-block: var(--section-space); } .space-t { padding-top: var(--section-space); } .space-b { padding-bottom: var(--section-space); } .space-b-lg { padding-bottom: 12rem; } /* 120px */ /* Spacing shims used inline in markup / CMS */ .mb-2 { margin-bottom: 0.8rem; } .mb-3 { margin-bottom: 1.6rem; } .mb-4 { margin-bottom: 2.4rem; } .mt-4 { margin-top: 2.4rem; } .pt-2 { padding-top: 0.8rem; } /* Overlay helpers (dark scrims over imagery) */ .overlay { position: absolute; inset: 0; background: var(--color-black); } .op-75 { opacity: 0.75; } /* -------------------------------------------------------------------------- 6. Scroll-reveal animations (replaces WOW.js — driven by main.js) Elements keep their original class names: .wow.fadeInUp / .wow.scaleIn -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { .wow { opacity: 0; } .wow.fadeInUp { transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .wow.scaleIn { /* Starts larger than natural size and settles down to scale(1) as it scrolls into view — matches the "zoom out into place" effect on the original site's map/contact section (as opposed to fadeInUp / a grow-in scale, which start smaller and expand up to size). */ transform: scale(1.5); transition: opacity 0.8s ease, transform 0.8s ease; } .wow.is-visible { opacity: 1; transform: none; } }