/* ============================================================ SOBER LIVING ANGELS — style.css ------------------------------------------------------------ HOW TO USE THIS FILE: 1. BRAND SETTINGS (colors, fonts) are right at the top — change them there and the whole site updates. 2. Everything below is organised by page section, in the same order as index.html, with clear comment banners. ============================================================ */ /* ============================================================ 1. BRAND SETTINGS ⭐ (edit these to re-skin the whole site) ============================================================ */ :root { /* Colors — brand colors from logo */ --color-primary: #0a468c; /* blue — main brand color */ --color-primary-dark: #083a6b; /* darker blue for hover states */ --color-accent: #4a8c5c; /* green — accent */ --color-green: #4a8c5c; /* green — same as accent */ --color-bg: #f4f9fc; /* light blue-tinted background */ --color-bg-alt: #e6f0fa; /* slightly darker for alt sections */ --color-text: #1a2a38; /* main text */ --color-text-soft: #5a6a78; /* lighter secondary text */ --color-white: #ffffff; --color-border: #d0e0f0; /* Fonts */ --font-heading: 'Playfair Display', Georgia, serif; --font-body: 'Inter', Arial, sans-serif; /* Layout */ --container-width: 1100px; --section-padding: 6rem; --radius: 14px; --shadow: 0 10px 30px rgba(46, 58, 50, 0.08); } /* ------------------------------------------------------------ DARK THEME ⭐ JS adds data-theme="dark" to the tag when the user picks dark mode. These variables override the ones above. ------------------------------------------------------------ */ [data-theme="dark"] { --color-primary: #6ab07a; /* green — primary for dark mode */ --color-primary-dark: #5a9e6a; --color-accent: #4a9ad4; /* blue accent for dark mode */ --color-green: #6ab07a; /* green — same as primary */ --color-bg: #0f1a24; /* deep blue-black page background */ --color-bg-alt: #162430; /* slightly lighter for alt sections */ --color-text: #e8eef4; /* main text (light on dark) */ --color-text-soft: #a0b0c0; /* lighter secondary text */ --color-white: #162430; /* cards use the alt bg in dark mode */ --color-border: #2a3a48; --shadow: 0 10px 30px rgba(0, 0, 0, 0.4); } /* ============================================================ 2. BASE / RESET ============================================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; /* smooth scrolling for nav links */ scroll-padding-top: 90px; /* offsets anchor links below fixed navbar */ } body { font-family: var(--font-body); color: var(--color-text); background: var(--color-bg); line-height: 1.7; } h1, h2, h3, h4 { font-family: var(--font-heading); line-height: 1.25; font-weight: 600; } h2 { font-size: 2.4rem; } h2 em, h1 em { font-style: italic; color: var(--color-primary); } img { max-width: 100%; display: block; } .container { width: min(100% - 2.5rem, var(--container-width)); margin-inline: auto; } /* ============================================================ 3. REUSABLE BITS (buttons, section headings) ============================================================ */ .btn { display: inline-block; padding: 0.9rem 2rem; border-radius: 999px; font-weight: 600; font-size: 1rem; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: all 0.25s ease; } .btn--primary { background: var(--color-primary); color: var(--color-white); } .btn--primary:hover { background: var(--color-primary); transform: translateY(-2px); box-shadow: var(--shadow); } .btn--ghost { border-color: var(--color-primary); color: var(--color-primary); background: transparent; } .btn--ghost:hover { background: var(--color-primary); color: var(--color-white); } .section { padding: var(--section-padding) 0; } .section--alt { background: var(--color-bg-alt); border-top: 3px solid var(--color-primary); } .section__heading { max-width: 640px; margin-bottom: 3rem; } .section__eyebrow { text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.8rem; font-weight: 600; color: var(--color-primary); margin-bottom: 0.8rem; } /* ============================================================ 4. NAVBAR ============================================================ */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(250, 248, 245, 0.92); backdrop-filter: blur(10px); transition: box-shadow 0.3s ease, background 0.3s ease; } /* Dark mode navbar background */ [data-theme="dark"] .navbar { background: rgba(26, 36, 32, 0.92); } /* JS adds this class once the user scrolls */ .navbar--scrolled { box-shadow: 0 2px 20px rgba(46, 58, 50, 0.1); } [data-theme="dark"] .navbar--scrolled { box-shadow: 0 2px 20px rgba(0, 0, 0, 0.4); } .navbar__inner { display: flex; align-items: center; justify-content: space-between; height: 72px; } .navbar__logo { display: flex; align-items: center; text-decoration: none; color: var(--color-text); } .navbar__logo-img { height: 45px; width: auto; } .navbar__logo-text { font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 600; color: var(--color-text); letter-spacing: 0.02em; } .navbar__links { display: flex; align-items: center; gap: 1.8rem; } .nav-link { text-decoration: none; color: var(--color-text); font-weight: 500; font-size: 0.95rem; transition: color 0.2s ease; } .nav-link:hover { color: var(--color-primary); } .nav-link--cta { background: var(--color-primary); color: var(--color-white); padding: 0.55rem 1.3rem; border-radius: 999px; } .nav-link--cta:hover { background: var(--color-primary); color: var(--color-white); } /* Hamburger (hidden on desktop) */ .navbar__toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; } .navbar__toggle span { width: 26px; height: 2px; background: var(--color-text); border-radius: 2px; transition: all 0.3s ease; } /* ============================================================ THEME TOGGLE BUTTON (dark / light mode) ============================================================ */ .theme-toggle { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-left: 0.5rem; background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: 50%; cursor: pointer; color: var(--color-text); transition: background 0.25s ease, transform 0.25s ease; } .theme-toggle:hover { transform: rotate(15deg); background: var(--color-primary); color: var(--color-white); } .theme-toggle__icon { width: 20px; height: 20px; } /* Only show the icon that matches the current mode */ .theme-toggle__icon--sun { display: none; } .theme-toggle__icon--moon { display: block; } [data-theme="dark"] .theme-toggle__icon--sun { display: block; } [data-theme="dark"] .theme-toggle__icon--moon { display: none; } /* ============================================================ 5. HERO ============================================================ */ .hero { min-height: 100vh; display: flex; align-items: center; padding-top: 72px; /* space for fixed navbar */ position: relative; background: radial-gradient(ellipse 60% 50% at 80% 20%, rgba(10, 70, 140, 0.12), transparent), radial-gradient(ellipse 50% 40% at 15% 80%, rgba(10, 70, 140, 0.10), transparent), var(--color-bg); } /* Watermark overlay - light mode */ .hero::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60%; max-width: 800px; height: auto; aspect-ratio: 1; background: url('../images/SLA LOGO WATERMARK.jpg') no-repeat center center; background-size: contain; opacity: 0.15; pointer-events: none; z-index: 0; } /* Dark mode hero — softer, darker gradient glows */ [data-theme="dark"] .hero::before { opacity: 0.06; } .hero .hero__inner { position: relative; z-index: 1; } .hero__inner { max-width: 720px; text-align: center; margin-inline: auto; } .hero__eyebrow { text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.8rem; font-weight: 600; color: var(--color-primary); margin-bottom: 1.4rem; } .hero__title { font-size: clamp(2.6rem, 6vw, 4.2rem); margin-bottom: 1.4rem; } .hero__text { font-size: 1.15rem; color: var(--color-text-soft); max-width: 560px; margin: 0 auto 2.4rem; } .hero__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } /* ============================================================ 6. ABOUT ============================================================ */ .about__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3.5rem; align-items: center; } .about__text p + p { margin-top: 1.2rem; } .about__text p { font-size: 1.08rem; color: var(--color-text-soft); } .about__highlights { display: grid; gap: 1.2rem; } .highlight { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.4rem 1.8rem; display: flex; align-items: baseline; gap: 1rem; box-shadow: var(--shadow); } .highlight__number { font-family: var(--font-heading); font-size: 1.8rem; font-weight: 700; color: var(--color-primary); } .highlight__label { color: var(--color-text-soft); font-size: 0.98rem; } /* ============================================================ 7. SERVICES (WHAT WE OFFER) ============================================================ */ .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; } .card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 2.4rem 2rem; transition: transform 0.25s ease, box-shadow 0.25s ease; } .card:hover { transform: translateY(-6px); box-shadow: var(--shadow); } .card__icon { width: 56px; height: 56px; border-radius: 50%; background: var(--color-bg-alt); color: var(--color-primary); display: flex; align-items: center; justify-content: center; margin-bottom: 1.4rem; } .card__icon svg { width: 26px; height: 26px; } .card h3 { font-size: 1.3rem; margin-bottom: 0.8rem; } .card p { color: var(--color-text-soft); font-size: 0.98rem; } /* ============================================================ 8. YOUR JOURNEY (STEPS) ============================================================ */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; counter-reset: step; } .step { text-align: center; padding: 0 1rem; } .step__number { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: var(--color-primary); color: var(--color-white); font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; margin-bottom: 1.3rem; } .step h3 { font-size: 1.35rem; margin-bottom: 0.7rem; } .step p { color: var(--color-text-soft); font-size: 0.98rem; } /* ============================================================ 9. STORIES (TESTIMONIALS) ============================================================ */ .quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; } .quote { background: var(--color-white); border-radius: var(--radius); border: 1px solid var(--color-border); padding: 2.2rem 2rem; position: relative; } /* Decorative quote mark */ .quote::before { content: "\201C"; /* opening double quote character */ font-family: var(--font-heading); font-size: 4rem; color: var(--color-primary); line-height: 1; display: block; margin-bottom: 0.5rem; } .quote p { color: var(--color-text); font-size: 1rem; margin-bottom: 1.2rem; } .quote footer { color: var(--color-primary); font-weight: 600; font-size: 0.9rem; } /* ============================================================ 10. CONTACT ============================================================ */ .contact__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 3.5rem; align-items: start; } .contact__item { margin-bottom: 1.6rem; } .contact__item h4 { font-family: var(--font-body); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-primary); margin-bottom: 0.3rem; } .contact__item p { font-size: 1.05rem; } .contact__note { margin-top: 2rem; padding: 1.2rem 1.4rem; background: var(--color-bg-alt); border-left: 4px solid var(--color-primary); border-radius: 0 var(--radius) var(--radius) 0; color: var(--color-text-soft); font-size: 0.95rem; } /* Form */ .contact__form { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 2.4rem; box-shadow: var(--shadow); } .form__row { margin-bottom: 1.3rem; } .form__row label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.4rem; } .form__row input, .form__row textarea { width: 100%; padding: 0.85rem 1rem; border: 1px solid var(--color-border); border-radius: 10px; font-family: var(--font-body); font-size: 1rem; color: var(--color-text); background: var(--color-bg); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .form__row input:focus, .form__row textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(10, 70, 140, 0.15); } .form__row textarea { resize: vertical; } /* Feedback message shown by JS after submit */ .form__feedback { margin-top: 1rem; font-weight: 600; font-size: 0.95rem; } .form__feedback--success { color: var(--color-primary); } .form__feedback--error { color: #c0392b; } /* ============================================================ 11. FOOTER ============================================================ */ .footer { background: var(--color-text); color: rgba(255, 255, 255, 0.75); padding: 3rem 0; } /* Dark mode footer — already dark, just nudge it darker */ [data-theme="dark"] .footer { background: #0f1714; color: rgba(232, 237, 232, 0.7); } .footer__inner { display: flex; flex-direction: column; align-items: center; gap: 1.4rem; text-align: center; } .footer__logo { display: flex; align-items: center; justify-content: center; text-decoration: none; color: var(--color-white); } .footer__logo-img { height: 40px; width: auto; } .footer__logo-text { font-family: 'Playfair Display', serif; font-size: 1.3rem; font-weight: 600; color: var(--color-white); letter-spacing: 0.02em; } .footer__logo span { color: var(--color-accent); } .footer__links { display: flex; gap: 1.8rem; flex-wrap: wrap; justify-content: center; } .footer__links a { color: rgba(255, 255, 255, 0.75); text-decoration: none; font-size: 0.95rem; transition: color 0.2s ease; } .footer__links a:hover { color: var(--color-accent); } .footer__copy { font-size: 0.88rem; } /* ============================================================ 12. SCROLL REVEAL ANIMATION (JS adds .reveal--visible) ============================================================ */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; } .reveal--visible { opacity: 1; transform: translateY(0); } /* ============================================================ 13. RESPONSIVE (TABLET & MOBILE) ============================================================ */ @media (max-width: 860px) { :root { --section-padding: 4rem; } /* Mobile nav */ .navbar__toggle { display: flex; } .navbar__links { position: fixed; top: 72px; right: 0; left: 0; background: var(--color-bg); flex-direction: column; align-items: flex-start; padding: 1.5rem 2rem 2rem; gap: 1.2rem; box-shadow: 0 20px 30px rgba(46, 58, 50, 0.12); transform: translateY(-130%); transition: transform 0.35s ease; } /* JS toggles this class when hamburger is clicked */ .navbar__links--open { transform: translateY(0); } /* Hamburger turns into an X when open */ .navbar__toggle--open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .navbar__toggle--open span:nth-child(2) { opacity: 0; } .navbar__toggle--open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Stack grids into one column */ .about__grid, .contact__grid { grid-template-columns: 1fr; gap: 2.5rem; } .cards, .quotes, .steps { grid-template-columns: 1fr; gap: 1.5rem; } .step { max-width: 420px; margin-inline: auto; } } /* On mobile, the theme toggle sits between the links and hamburger */ @media (max-width: 860px) { .theme-toggle { margin-left: auto; margin-right: 0.5rem; } }