/* ============================================================ 605 Marine Co — Colors & Type Sydney Harbour marine services. Classic, nautical, premium. ============================================================ */ /* --- Fonts --------------------------------------------------- The brand wordmark uses a high-contrast Didone serif. Reem Kufi (provided) is used as a secondary display accent. We ship Reem Kufi locally and load Playfair Display (Didone) + Cormorant Garamond + Inter (body) via Google Fonts as the closest free stand-ins for the wordmark serif and supporting type. FLAG: exact wordmark font not provided — substituted. ------------------------------------------------------------ */ @font-face { font-family: "Reem Kufi"; src: url("fonts/ReemKufi-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@400;500;600;700&display=swap"); :root { /* ------------------------------------------------------- COLOR SYSTEM The brand is built around a deep naval navy and ivory, lifted by harbour-blue imagery and warm brass accents. ------------------------------------------------------- */ /* Core brand */ --navy-900: #1a2740; /* Deepest navy — headers, logo */ --navy-800: #22304a; /* Primary brand navy */ --navy-700: #2b3c5c; /* Hover/lifted navy */ --navy-600: #3d5278; /* Muted navy, rules */ --navy-500: #6178a0; /* Disabled / captions on light */ /* Harbour / sea accents */ --harbour-700: #1f5f86; /* Deep harbour */ --harbour-500: #3f8bb8; /* Sydney sky-meets-sea */ --harbour-300: #a7c8dd; /* Soft harbour haze */ --harbour-200: #9bdaeb; /* Bright sky — highlight tints */ /* Brass — sparingly, as an accent for heritage feel */ --brass-600: #a57c3b; --brass-500: #c49a52; --brass-200: #ecd9ae; /* Neutrals — warm ivory vs cool stone */ --ivory-50: #fbf8f1; /* Primary light background */ --ivory-100: #f4efe2; /* Subtle cards on ivory */ --stone-200: #e6e2d6; /* Hairline dividers */ --stone-400: #a6a192; /* Secondary text on ivory */ --stone-600: #6b6758; --white: #ffffff; --black: #0b1220; /* Semantic — success/danger/warning kept restrained */ --success: #2f7a53; --danger: #a53c3c; --warning: #c49a52; /* reuses brass */ --info: var(--harbour-500); /* Foreground / background tokens */ --bg: var(--ivory-50); --bg-elevated: var(--white); --bg-inverse: var(--navy-800); --bg-section: var(--ivory-100); --fg: var(--navy-900); --fg-muted: var(--stone-600); --fg-subtle: var(--stone-400); --fg-on-dark: var(--ivory-50); --fg-on-dark-muted: #b6c0d4; --border: var(--stone-200); --border-strong:var(--navy-600); --rule: var(--navy-800); /* ------------------------------------------------------- TYPE SYSTEM Display serif (Playfair) + body sans (Inter). A tracked, small-caps "label" style is key to the brand (cf. logo "PREMIUM BOATING SERVICES"). ------------------------------------------------------- */ --font-display: "Playfair Display", "Cormorant Garamond", "Times New Roman", serif; --font-serif: "Cormorant Garamond", "Playfair Display", Georgia, serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --font-accent: "Reem Kufi", "Playfair Display", serif; /* provided accent */ --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Type scale — meant to evoke editorial / yacht-brochure */ --fs-display: clamp(48px, 6vw, 88px); --fs-h1: clamp(36px, 4.4vw, 64px); --fs-h2: clamp(28px, 3vw, 44px); --fs-h3: 28px; --fs-h4: 22px; --fs-body: 17px; --fs-small: 14px; --fs-label: 12px; --lh-tight: 1.08; --lh-display: 1.12; --lh-heading: 1.2; --lh-body: 1.55; /* Tracked-caps — signature brand label style */ --tracking-label: 0.22em; --tracking-nav: 0.14em; --tracking-soft: 0.04em; /* ------------------------------------------------------- SPACING / RADII / SHADOW / MOTION ------------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; /* Square-ish — the brand is classical, not rounded-modern */ --radius-xs: 0px; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(26, 39, 64, 0.06); --shadow-md: 0 6px 18px rgba(26, 39, 64, 0.08); --shadow-lg: 0 18px 48px rgba(26, 39, 64, 0.14); --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-sail: cubic-bezier(0.4, 0, 0.2, 1); /* gentle, unhurried */ --dur-fast: 180ms; --dur-base: 280ms; --dur-slow: 520ms; } /* ------------------------------------------------------------ SEMANTIC STYLES — apply directly or via class ------------------------------------------------------------ */ html, body { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); } .display, h1.display, .h-display { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: -0.01em; color: var(--fg); } h1, .h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h1); line-height: var(--lh-heading); letter-spacing: -0.005em; } h2, .h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h2); line-height: var(--lh-heading); } h3, .h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-heading); } h4, .h4 { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-h4); line-height: var(--lh-heading); } p, .body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg); } .lede { font-family: var(--font-serif); font-size: 22px; font-style: italic; color: var(--fg-muted); line-height: 1.5; } .eyebrow, .label-caps { font-family: var(--font-body); font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-muted); } .nav-link { font-family: var(--font-body); font-size: 13px; font-weight: 500; letter-spacing: var(--tracking-nav); text-transform: uppercase; color: var(--fg); } .small, small { font-size: var(--fs-small); color: var(--fg-muted); } code, .mono { font-family: var(--font-mono); font-size: 14px; } a { color: var(--navy-800); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } a:hover { color: var(--harbour-700); } /* Decorative horizontal rule seen on the logo and the site */ .rule { display: block; width: 80px; height: 1px; background: var(--navy-600); border: 0; margin: var(--space-5) 0; } .rule--center { margin-left: auto; margin-right: auto; }