/* ============================================================= ALGARVE BIOFARM — Coming Soon Refined countryside hospitality. Calm, elegant, premium. Theme bridges with the main site (terracotta + warm cream) while honouring the brief's palette and typography. ============================================================= */ :root { /* Palette from brief */ --aloe-green: #8aac7a; --herb-green: #5a7a4a; --warm-white: #f7f3ed; --sand: #e8dfc8; --stone: #c9bfa8; --terracotta: #b8694a; --terracotta-dark: #9e5535; --gold: #c9a84c; --dark-text: #2e2a24; --muted-text: rgba(46, 42, 36, 0.62); --hairline: rgba(46, 42, 36, 0.14); /* Type */ --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --font-body: 'Jost', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Motion */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); } /* ---------- Reset & base ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; min-height: 100%; /* Set the warm cream on too so iOS Safari overscroll bounce and the mobile browser chrome never expose a different colour (e.g. the herb-green decorative SVG behind the body). */ background-color: var(--warm-white); } body { font-family: var(--font-body); font-weight: 400; color: var(--dark-text); background-color: var(--warm-white); /* A whisper of warm gradient — sand pooled in opposite corners. NOTE: background-attachment: fixed is buggy on iOS Safari and can cause the gradients to disappear or tile, leaving herb-green SVG decor showing through. We use the default scroll attachment instead. */ background-image: radial-gradient(ellipse at 15% 10%, rgba(232, 223, 200, 0.55) 0%, transparent 55%), radial-gradient(ellipse at 85% 95%, rgba(201, 191, 168, 0.35) 0%, transparent 55%); line-height: 1.65; letter-spacing: 0.01em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; position: relative; } a { color: inherit; text-decoration: none; } /* ---------- Background decor ---------- */ .bg-decor { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .bg-svg { position: absolute; color: var(--herb-green); opacity: 0.09; width: clamp(220px, 28vw, 380px); height: auto; } .bg-svg-tl { top: 4vh; left: -3vw; transform: rotate(-6deg); } .bg-svg-br { bottom: -3vw; right: -3vw; transform: rotate(8deg); color: var(--terracotta); opacity: 0.08; } /* Subtle noise texture for warmth */ .noise { position: absolute; inset: 0; opacity: 0.4; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,"); background-size: 220px 220px; } /* ---------- Gold corner markers ---------- */ .corner { position: fixed; width: 28px; height: 28px; pointer-events: none; z-index: 3; color: var(--gold); opacity: 0; animation: cornerIn 1.2s 0.2s var(--ease) forwards; } .corner::before, .corner::after { content: ''; position: absolute; background: currentColor; } .corner::before { height: 1px; width: 100%; top: 0; left: 0; } .corner::after { width: 1px; height: 100%; top: 0; left: 0; } .corner-tl { top: 28px; left: 28px; } .corner-tr { top: 28px; right: 28px; transform: scaleX(-1); } .corner-bl { bottom: 28px; left: 28px; transform: scaleY(-1); } .corner-br { bottom: 28px; right: 28px; transform: scale(-1, -1); } /* ---------- Layout ---------- */ .page { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; padding: clamp(5rem, 12vh, 8rem) clamp(1.5rem, 5vw, 3rem) clamp(2.5rem, 6vh, 4rem); text-align: center; display: flex; flex-direction: column; align-items: center; min-height: calc(100vh - 6rem); justify-content: center; } /* ---------- Typography ---------- */ .eyebrow { font-family: var(--font-body); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: var(--herb-green); margin: 0 0 2rem; } /* Wordmark — hand-drawn brand logo. The image already has a clean transparent background so it sits naturally on the cream backdrop. Scales fluidly with the viewport, capped so it stays elegant. */ .wordmark { margin: 0; line-height: 0; max-width: min(560px, 78vw); width: 100%; display: flex; justify-content: center; } .wordmark img { width: 100%; height: auto; display: block; /* Subtle drop shadow for warmth against the cream background */ filter: drop-shadow(0 2px 10px rgba(46, 42, 36, 0.08)); } .tagline { font-family: var(--font-display); font-weight: 400; font-style: italic; font-size: clamp(1.15rem, 2vw, 1.5rem); color: var(--terracotta); margin: 0.85rem 0 0; letter-spacing: 0.01em; } .tagline em { font-style: italic; } /* ---------- Divider ---------- */ .divider { display: flex; align-items: center; justify-content: center; gap: 0.9rem; margin: 2.5rem 0 2rem; color: var(--gold); width: clamp(180px, 30vw, 260px); } .divider-line { flex: 1; height: 1px; background: linear-gradient(to right, transparent, currentColor 40%, currentColor 60%, transparent); opacity: 0.55; } .divider svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--herb-green); opacity: 0.7; } /* ---------- Intro ---------- */ .intro { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.05rem, 1.55vw, 1.25rem); line-height: 1.7; color: var(--dark-text); max-width: 560px; margin: 0 auto 2.5rem; letter-spacing: 0.005em; } /* ---------- Pills ---------- */ .pill-row { list-style: none; margin: 0 0 3rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.55rem 0.6rem; justify-content: center; max-width: 600px; } .pill { font-family: var(--font-body); font-size: 0.74rem; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: var(--herb-green); background: rgba(138, 172, 122, 0.1); border: 1px solid rgba(90, 122, 74, 0.22); padding: 0.55rem 1rem; border-radius: 999px; transition: background 0.4s var(--ease), border-color 0.4s var(--ease), color 0.4s var(--ease); } .pill:hover { background: rgba(184, 105, 74, 0.1); border-color: rgba(184, 105, 74, 0.32); color: var(--terracotta-dark); } /* ---------- CTA ---------- */ .cta { margin-top: 0.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.65rem; } .cta-label { margin: 0; font-family: var(--font-body); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted-text); } .cta-link { font-family: var(--font-display); font-style: italic; font-size: clamp(1.35rem, 2.4vw, 1.75rem); color: var(--terracotta); border-bottom: 1px solid rgba(184, 105, 74, 0.45); padding-bottom: 2px; transition: color 0.3s var(--ease), border-color 0.3s var(--ease); } .cta-link:hover { color: var(--terracotta-dark); border-bottom-color: var(--terracotta-dark); } /* ---------- Footer ---------- */ .site-footer { position: relative; z-index: 1; text-align: center; padding: 2rem 1.5rem 2.5rem; color: var(--muted-text); } .footer-line { margin: 0 0 0.4rem; font-family: var(--font-body); font-size: 0.78rem; font-weight: 400; letter-spacing: 0.1em; color: var(--dark-text); } .footer-meta { margin: 0; font-family: var(--font-body); font-size: 0.68rem; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted-text); } /* ---------- Staggered fade-up entrance animations ---------- */ .stagger { opacity: 0; transform: translateY(14px); animation: fadeUp 1s var(--ease) forwards; } .stagger[data-step="1"] { animation-delay: 0.15s; } .stagger[data-step="2"] { animation-delay: 0.30s; } .stagger[data-step="3"] { animation-delay: 0.45s; } .stagger[data-step="4"] { animation-delay: 0.60s; } .stagger[data-step="5"] { animation-delay: 0.78s; } .stagger[data-step="6"] { animation-delay: 0.95s; } .stagger[data-step="7"] { animation-delay: 1.12s; } .stagger[data-step="8"] { animation-delay: 1.30s; } .stagger[data-step="9"] { animation-delay: 1.50s; } @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } } @keyframes cornerIn { to { opacity: 0.7; } } /* ---------- Responsive ---------- */ @media (max-width: 640px) { .corner { width: 20px; height: 20px; } .corner-tl, .corner-tr { top: 18px; } .corner-bl, .corner-br { bottom: 18px; } .corner-tl, .corner-bl { left: 18px; } .corner-tr, .corner-br { right: 18px; } .page { padding-top: 4.5rem; padding-bottom: 2rem; } .eyebrow { font-size: 0.62rem; letter-spacing: 0.22em; margin-bottom: 1.5rem; } .pill { font-size: 0.68rem; padding: 0.5rem 0.85rem; letter-spacing: 0.12em; } .pill-row { gap: 0.45rem 0.5rem; margin-bottom: 2.5rem; } .intro { font-size: 1.05rem; } .bg-svg { opacity: 0.06; } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .stagger { opacity: 1; transform: none; animation: none; } .corner { opacity: 0.7; animation: none; } }