/* ============================================================ Full Throttle Marine LLC ------------------------------------------------------------ THREE THEMES, one stylesheet. The theme is chosen by the data-theme attribute on : (none) or data-theme="midnight" dark violet — default data-theme="daylight" light / clean data-theme="deepwater" deep navy marine Every theme is just a block of variable overrides below. To lock one theme permanently, hardcode it in the tag (e.g. ) and delete the theme switcher markup + script. Nothing else changes. Accent violet is constant across all three themes — it comes from the shop logo, so it stays on-brand whichever base wins. ============================================================ */ /* ---------- THEME 1: MIDNIGHT (default) ---------- */ :root{ --ink: #0A0910; --ink-2: #100E18; --surface: #16131F; --surface-2: #1D1929; --line: #2C2640; --line-soft: #221D31; --violet: #8B3FD9; --violet-bright: #A855F7; --violet-hot: #C94FE8; --violet-deep: #5B21B6; --on-accent: #FFFFFF; --text: #F4F1F8; --text-dim: #B4ADC4; --text-mute: #857D9B; /* Surfaces & effects */ --header-bg: rgba(10,9,16,.72); --header-bg-stuck: rgba(10,9,16,.94); --drawer-bg: rgba(10,9,16,.98); --glass: rgba(22,19,31,.92); --input-bg: #0A0910; --input-bg-focus: #100E18; --ghost-bg: rgba(255,255,255,.03); --ghost-bg-hover: rgba(168,85,247,.10); --grid-line: rgba(255,255,255,.028); --glow-1: rgba(139,63,217,.34); --glow-2: rgba(91,33,182,.14); --img-veil: rgba(10,9,16,.55); --shot-veil: rgba(10,9,16,.90); --icon-bg: linear-gradient(140deg,rgba(168,85,247,.20),rgba(91,33,182,.10)); --icon-border: rgba(168,85,247,.26); --strip-bg: linear-gradient(90deg,var(--ink-2),rgba(91,33,182,.10),var(--ink-2)); --cta-bg: radial-gradient(ellipse 70% 130% at 20% 0%, rgba(168,85,247,.26), transparent 62%), linear-gradient(135deg,#5B21B6 0%, #2A1259 45%, #0A0910 100%); --cta-text: #F4F1F8; --cta-text-dim: rgba(244,241,248,.80); --cta-ghost-bg: rgba(255,255,255,.09); --cta-ghost-border: rgba(255,255,255,.24); --lightbox-bg: rgba(6,5,10,.95); --heading-grad: linear-gradient(100deg,#C94FE8,#A855F7 55%,#E9D5FF); --num-grad: linear-gradient(160deg,#C94FE8,rgba(91,33,182,.35)); --footer-bg: var(--ink-2); --select-arrow: %23B4ADC4; --shadow: 0 24px 60px -18px rgba(0,0,0,.85); --shadow-soft: 0 10px 30px -12px rgba(0,0,0,.7); --shadow-violet: 0 26px 70px -22px rgba(139,63,217,.55); --shadow-btn: 0 14px 34px -14px rgba(168,85,247,.65); --radius: 14px; --radius-lg: 22px; --display: "Barlow Condensed", "Arial Narrow", "Segoe UI", system-ui, sans-serif; --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --wrap: 1200px; color-scheme: dark; } /* ---------- THEME 2: DAYLIGHT ---------- */ [data-theme="daylight"]{ --ink: #FFFFFF; --ink-2: #F5F3FA; --surface: #FFFFFF; --surface-2: #FAF8FD; --line: #DED7EC; --line-soft: #EAE4F4; --violet: #7C3AED; --violet-bright: #7C3AED; --violet-hot: #7E22CE; --violet-deep: #4C1D95; --on-accent: #FFFFFF; --text: #15111F; --text-dim: #4B4360; --text-mute: #6F6786; --header-bg: rgba(255,255,255,.80); --header-bg-stuck: rgba(255,255,255,.96); --drawer-bg: rgba(255,255,255,.98); --glass: rgba(255,255,255,.95); --input-bg: #FFFFFF; --input-bg-focus: #FDFCFF; --ghost-bg: #FFFFFF; --ghost-bg-hover: rgba(124,58,237,.07); --grid-line: rgba(21,17,31,.045); --glow-1: rgba(124,58,237,.16); --glow-2: rgba(124,58,237,.05); --img-veil: rgba(21,17,31,.30); --shot-veil: rgba(21,17,31,.86); --icon-bg: linear-gradient(140deg,rgba(124,58,237,.12),rgba(124,58,237,.04)); --icon-border: rgba(124,58,237,.22); --strip-bg: linear-gradient(90deg,#F5F3FA,rgba(124,58,237,.09),#F5F3FA); --cta-bg: radial-gradient(ellipse 70% 130% at 20% 0%, rgba(168,85,247,.34), transparent 62%), linear-gradient(135deg,#6D28D9 0%, #4C1D95 55%, #2E1065 100%); --cta-text: #FFFFFF; --cta-text-dim: rgba(255,255,255,.84); --cta-ghost-bg: rgba(255,255,255,.12); --cta-ghost-border: rgba(255,255,255,.32); --lightbox-bg: rgba(21,17,31,.90); --heading-grad: linear-gradient(100deg,#7E22CE,#7C3AED 55%,#A855F7); --num-grad: linear-gradient(160deg,#7C3AED,rgba(124,58,237,.35)); --footer-bg: #F5F3FA; --select-arrow: %234B4360; --shadow: 0 22px 50px -22px rgba(38,26,64,.28); --shadow-soft: 0 8px 24px -12px rgba(38,26,64,.16); --shadow-violet: 0 24px 60px -26px rgba(124,58,237,.38); --shadow-btn: 0 12px 28px -12px rgba(124,58,237,.45); color-scheme: light; } /* ---------- THEME 3: DEEP WATER ---------- */ [data-theme="deepwater"]{ --ink: #060D18; --ink-2: #0A1524; --surface: #0F1D30; --surface-2: #14263B; --line: #21395A; --line-soft: #182B44; --violet: #8B5CF6; --violet-bright: #A78BFA; --violet-hot: #C4B5FD; --violet-deep: #4C1D95; --on-accent: #0B1220; --text: #EAF2FB; --text-dim: #A3B8D2; --text-mute: #748CAC; --header-bg: rgba(6,13,24,.74); --header-bg-stuck: rgba(6,13,24,.95); --drawer-bg: rgba(6,13,24,.98); --glass: rgba(15,29,48,.93); --input-bg: #060D18; --input-bg-focus: #0A1524; --ghost-bg: rgba(255,255,255,.04); --ghost-bg-hover: rgba(167,139,250,.12); --grid-line: rgba(163,184,210,.05); --glow-1: rgba(56,189,248,.20); --glow-2: rgba(139,92,246,.16); --img-veil: rgba(6,13,24,.58); --shot-veil: rgba(6,13,24,.92); --icon-bg: linear-gradient(140deg,rgba(56,189,248,.16),rgba(139,92,246,.12)); --icon-border: rgba(125,211,252,.28); --strip-bg: linear-gradient(90deg,var(--ink-2),rgba(56,189,248,.10),var(--ink-2)); --cta-bg: radial-gradient(ellipse 70% 130% at 20% 0%, rgba(56,189,248,.24), transparent 60%), linear-gradient(135deg,#0E3A5C 0%, #10233D 45%, #060D18 100%); --cta-text: #EAF2FB; --cta-text-dim: rgba(234,242,251,.82); --cta-ghost-bg: rgba(255,255,255,.10); --cta-ghost-border: rgba(255,255,255,.26); --lightbox-bg: rgba(3,8,15,.96); --heading-grad: linear-gradient(100deg,#7DD3FC,#A78BFA 55%,#E0E7FF); --num-grad: linear-gradient(160deg,#7DD3FC,rgba(139,92,246,.35)); --footer-bg: var(--ink-2); --select-arrow: %23A3B8D2; --shadow: 0 24px 60px -18px rgba(0,0,0,.8); --shadow-soft: 0 10px 30px -12px rgba(0,0,0,.6); --shadow-violet: 0 26px 70px -24px rgba(56,189,248,.38); --shadow-btn: 0 14px 34px -14px rgba(139,92,246,.55); color-scheme: dark; } /* Deep Water uses a light lavender accent, so accent buttons need dark text */ [data-theme="deepwater"] .btn-primary, [data-theme="deepwater"] .phone-pill, [data-theme="deepwater"] .nav .nav-cta{ background:linear-gradient(135deg,#A78BFA,#7C3AED); color:#FFFFFF; } /* ============================================================ BASE ============================================================ */ *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body{ margin:0; font-family:var(--body); font-size:17px; line-height:1.65; color:var(--text); background:var(--ink); -webkit-font-smoothing:antialiased; overflow-x:hidden; /* No colour transition — themes differ too much for a cross-fade to look like anything but mud on the way through. Instant reads as intentional. */ } img{ max-width:100%; display:block; } a{ color:var(--violet-bright); text-decoration:none; } a:hover{ color:var(--violet-hot); } h1,h2,h3{ font-family:var(--display); font-weight:700; line-height:1.03; letter-spacing:-.005em; margin:0; text-transform:uppercase; } svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px; } .skip-link{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--violet); color:var(--on-accent); padding:12px 20px; border-radius:0 0 10px 0; font-weight:600; } .skip-link:focus{ left:0; } :where(a,button,input,textarea,select,[tabindex]):focus-visible{ outline:2px solid var(--violet-hot); outline-offset:3px; border-radius:6px; } /* ---------- Eyebrow ---------- */ .eyebrow{ display:inline-flex; align-items:center; gap:10px; font-family:var(--body); font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--violet-hot); margin:0 0 18px; } .eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--violet-hot); box-shadow:0 0 0 4px color-mix(in srgb, var(--violet-hot) 18%, transparent); flex:none; } /* ---------- Buttons ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:15px 28px; border-radius:999px; font-family:var(--body); font-size:15px; font-weight:600; letter-spacing:.01em; border:1px solid transparent; cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease; white-space:nowrap; } .btn svg{ width:17px; height:17px; flex:none; stroke-width:2.2; } .btn-primary{ background:linear-gradient(135deg,var(--violet-bright),var(--violet-deep)); color:var(--on-accent); box-shadow:var(--shadow-violet); } .btn-primary:hover{ color:var(--on-accent); transform:translateY(-2px); } .btn-ghost{ background:var(--ghost-bg); border-color:var(--line); color:var(--text); } .btn-ghost:hover{ color:var(--text); border-color:var(--violet-bright); background:var(--ghost-bg-hover); transform:translateY(-2px); } .btn-lg{ padding:18px 34px; font-size:16px; } /* ============================================================ HEADER ============================================================ */ .site-header{ position:sticky; top:0; z-index:100; background:var(--header-bg); backdrop-filter:blur(16px) saturate(140%); border-bottom:1px solid transparent; transition:border-color .25s ease, background .25s ease; } .site-header.is-stuck{ border-bottom-color:var(--line-soft); background:var(--header-bg-stuck); } .header-inner{ display:flex; align-items:center; gap:20px; min-height:78px; } .brand{ display:flex; align-items:center; gap:13px; color:var(--text); margin-right:auto; } .brand:hover{ color:var(--text); } .brand-mark{ width:44px; height:44px; border-radius:11px; flex:none; border:1px solid var(--line); box-shadow:0 0 0 3px color-mix(in srgb, var(--violet) 14%, transparent); } .brand-text{ display:flex; flex-direction:column; line-height:1.1; } .brand-name{ font-family:var(--display); font-weight:700; font-size:22px; text-transform:uppercase; letter-spacing:.01em; } .brand-sub{ font-size:11px; color:var(--text-mute); letter-spacing:.09em; text-transform:uppercase; font-weight:600; } .nav{ display:flex; align-items:center; gap:2px; } .nav a{ padding:10px 13px; border-radius:9px; font-size:14.5px; font-weight:500; color:var(--text-dim); transition:color .18s ease, background .18s ease; } .nav a:hover{ color:var(--text); background:var(--ghost-bg-hover); } .nav a[aria-current="page"]{ color:var(--violet-hot); } .nav .nav-cta{ display:none; } .phone-pill{ display:inline-flex; align-items:center; gap:9px; padding:11px 20px 11px 16px; border-radius:999px; background:linear-gradient(135deg,var(--violet-bright),var(--violet-deep)); color:var(--on-accent); font-weight:600; font-size:14.5px; box-shadow:var(--shadow-btn); transition:transform .18s ease; } .phone-pill:hover{ color:var(--on-accent); transform:translateY(-1px); } .phone-pill svg{ width:16px; height:16px; fill:currentColor; stroke:none; flex:none; } .nav-toggle{ display:none; width:44px; height:44px; flex:none; background:var(--ghost-bg); border:1px solid var(--line); border-radius:11px; cursor:pointer; padding:0; place-items:center; gap:5px; } .nav-toggle span{ display:block; width:19px; height:2px; border-radius:2px; background:var(--text); transition:transform .25s ease, opacity .2s ease; } .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; } .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } /* ============================================================ HERO ============================================================ */ .hero{ position:relative; overflow:hidden; padding:clamp(56px,7vw,104px) 0 clamp(64px,7vw,110px); } .hero::before{ content:""; position:absolute; inset:0; z-index:0; background-image: linear-gradient(to right, var(--grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px); background-size:72px 72px; mask-image:radial-gradient(ellipse 90% 70% at 50% 15%, #000 20%, transparent 78%); -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 15%, #000 20%, transparent 78%); } .hero-glow{ position:absolute; z-index:0; pointer-events:none; width:1100px; height:1100px; left:50%; top:-560px; transform:translateX(-50%); background:radial-gradient(circle, var(--glow-1) 0%, var(--glow-2) 38%, transparent 66%); } .hero-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(36px,5vw,76px); align-items:center; } .hero h1{ font-size:clamp(2.9rem,6.2vw,5rem); margin-bottom:22px; } .hero h1 em{ font-style:normal; background:var(--heading-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; } .lede{ font-size:clamp(1.02rem,1.35vw,1.16rem); color:var(--text-dim); max-width:53ch; margin:0 0 32px; } .hero-actions{ display:flex; flex-wrap:wrap; gap:13px; margin-bottom:44px; } .hero-trust{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; list-style:none; margin:0; padding:26px 0 0; border-top:1px solid var(--line-soft); } .hero-trust li{ display:flex; flex-direction:column; } .hero-trust strong{ font-family:var(--display); font-size:2rem; font-weight:700; line-height:1; color:var(--text); } .hero-trust span{ font-size:12.5px; color:var(--text-mute); letter-spacing:.05em; text-transform:uppercase; font-weight:600; margin-top:5px; } .hero-media{ position:relative; } .framed{ margin:0; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow), var(--shadow-violet); position:relative; background:var(--surface); } .framed::after{ content:""; position:absolute; inset:0; background:linear-gradient(190deg, transparent 42%, var(--img-veil) 100%); pointer-events:none; } /* Kept close to square so the hero photo works whether it's the portrait version or the squarer one — a tall frame would crop the boat off the sides. */ .framed img{ width:100%; height:clamp(370px,44vw,530px); object-fit:cover; object-position:center 42%; } .float-card{ position:absolute; left:-18px; bottom:-26px; background:var(--glass); backdrop-filter:blur(14px); border:1px solid var(--line); border-radius:var(--radius); padding:17px 22px; box-shadow:var(--shadow); max-width:min(300px,86%); } .float-label{ display:block; font-size:10.5px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--violet-hot); margin-bottom:6px; } .float-phone{ display:block; font-family:var(--display); font-size:1.7rem; font-weight:700; color:var(--text); line-height:1.1; letter-spacing:.01em; } .float-phone:hover{ color:var(--violet-hot); } .float-mail{ display:block; font-size:12.5px; color:var(--text-dim); word-break:break-all; margin-top:3px; } /* ============================================================ MARQUEE STRIP ============================================================ */ .strip{ overflow:hidden; border-block:1px solid var(--line-soft); background:var(--strip-bg); padding:15px 0; mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); } .strip-track{ display:flex; align-items:center; gap:26px; width:max-content; animation:slide 42s linear infinite; font-family:var(--display); font-size:1.05rem; font-weight:600; text-transform:uppercase; letter-spacing:.1em; color:var(--text-mute); } .strip-track span:nth-child(even){ color:var(--violet); } @keyframes slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } /* ============================================================ SECTIONS ============================================================ */ .section{ padding:clamp(66px,8.5vw,116px) 0; } .section-alt{ background:var(--ink-2); border-block:1px solid var(--line-soft); } .section-head{ max-width:680px; margin-bottom:clamp(38px,5vw,58px); } .section-head h2{ font-size:clamp(2.1rem,4.2vw,3.2rem); } .section-sub{ color:var(--text-dim); font-size:1.05rem; margin:16px 0 0; } /* ---------- Cards ---------- */ .cards{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); } .card{ background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius); padding:28px 26px 30px; position:relative; overflow:hidden; box-shadow:var(--shadow-soft); transition:transform .25s ease, border-color .25s ease, background .25s ease; } .card::before{ content:""; position:absolute; inset:0 0 auto; height:2px; background:linear-gradient(90deg,var(--violet-hot),var(--violet-deep)); transform:scaleX(0); transform-origin:left; transition:transform .35s ease; } .card:hover{ transform:translateY(-5px); border-color:var(--line); background:var(--surface-2); } .card:hover::before{ transform:scaleX(1); } .card-icon{ display:grid; place-items:center; width:48px; height:48px; border-radius:12px; background:var(--icon-bg); border:1px solid var(--icon-border); color:var(--violet-hot); margin-bottom:19px; } .card-icon svg{ width:24px; height:24px; } .card h3{ font-size:1.32rem; margin-bottom:9px; } .card p{ margin:0; color:var(--text-dim); font-size:14.8px; line-height:1.62; } .services-note{ margin:34px 0 0; padding:20px 24px; background:var(--surface); border:1px dashed var(--line); border-radius:var(--radius); color:var(--text-dim); font-size:15px; } /* ---------- Rates / pricing ---------- */ .rates{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); } .rate{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius); padding:26px 24px 26px; box-shadow:var(--shadow-soft); } .rate-label{ font-size:11.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--violet-hot); margin-bottom:12px; } .rate-price{ font-family:var(--display); font-weight:700; line-height:1; font-size:2.7rem; color:var(--text); display:flex; align-items:baseline; gap:6px; } .rate-price small{ font-family:var(--body); font-size:14px; font-weight:500; color:var(--text-dim); letter-spacing:.01em; /* --text-mute fell just under AA here */ } .rate-note{ margin-top:12px; font-size:14.5px; color:var(--text-dim); line-height:1.6; } .rate-featured{ border-color:var(--violet-bright); background:var(--surface-2); } .rates-note{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; margin-top:20px; padding:24px 26px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--line-soft); box-shadow:var(--shadow-soft); } .rates-note h3{ font-size:1.3rem; margin-bottom:7px; } .rates-note p{ margin:0; color:var(--text-dim); font-size:15px; max-width:62ch; } /* Two-tier service area */ .tiers{ display:grid; gap:18px; grid-template-columns:1fr 1fr; margin-bottom:28px; } .tier{ background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius); padding:28px 26px 30px; box-shadow:var(--shadow-soft); } .tier-primary{ border-color:var(--violet-bright); background:var(--surface-2); } .tier-tag{ display:inline-block; margin-bottom:14px; font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:5px 11px; border-radius:999px; background:var(--icon-bg); border:1px solid var(--icon-border); color:var(--violet-hot); } .tier h3{ font-size:1.45rem; margin-bottom:10px; } .tier p{ margin:0 0 14px; color:var(--text-dim); font-size:15px; } .tier p:last-child{ margin-bottom:0; } /* ---------- Steps ---------- */ .steps{ list-style:none; margin:0; padding:0; display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); } .step{ background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius); padding:30px 28px 32px; position:relative; box-shadow:var(--shadow-soft); } .step-num{ display:block; font-family:var(--display); font-size:3.1rem; font-weight:700; line-height:1; background:var(--num-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; margin-bottom:12px; } .step h3{ font-size:1.4rem; margin-bottom:10px; } .step p{ margin:0; color:var(--text-dim); font-size:15px; } /* ---------- About ---------- */ .about-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(34px,5vw,68px); align-items:center; } .about-media{ margin:0; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); position:relative; background:var(--surface); } .about-media img{ width:100%; height:clamp(400px,50vw,580px); object-fit:cover; object-position:center 30%; } .about-media figcaption{ position:absolute; inset:auto 0 0; padding:34px 22px 16px; background:linear-gradient(transparent,var(--shot-veil)); font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#D9D3E6; } .about-copy h2{ font-size:clamp(2rem,3.8vw,2.9rem); margin-bottom:20px; } .about-copy p{ color:var(--text-dim); margin:0 0 17px; } .about-copy p strong{ color:var(--text); font-weight:600; } .pull{ margin:26px 0; padding:18px 24px; border-left:3px solid var(--violet-bright); background:var(--surface-2); border-radius:0 var(--radius) var(--radius) 0; font-size:1.05rem; color:var(--text); font-style:italic; } .checklist{ list-style:none; margin:26px 0 32px; padding:0; display:grid; gap:11px; } .checklist li{ position:relative; padding-left:32px; color:var(--text); font-size:15px; } .checklist li::before{ content:""; position:absolute; left:0; top:.45em; width:18px; height:18px; border-radius:50%; background:color-mix(in srgb, var(--violet-bright) 16%, transparent); border:1px solid color-mix(in srgb, var(--violet-bright) 40%, transparent); } .checklist li::after{ content:""; position:absolute; left:5.5px; top:.72em; width:7px; height:4px; border-left:2px solid var(--violet-hot); border-bottom:2px solid var(--violet-hot); transform:rotate(-45deg); } /* ---------- Chips / service area ---------- */ .chips{ list-style:none; margin:0 0 36px; padding:0; display:flex; flex-wrap:wrap; gap:11px; } .chip{ display:inline-flex; align-items:center; gap:9px; padding:11px 20px; border-radius:999px; background:var(--surface); border:1px solid var(--line-soft); font-size:14.5px; font-weight:500; color:var(--text-dim); transition:border-color .2s ease, color .2s ease; } .chip:hover{ border-color:var(--violet); color:var(--text); } .chip-home{ background:var(--icon-bg); border-color:var(--icon-border); color:var(--text); font-weight:600; } .chip-home span{ font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; background:var(--violet-bright); color:var(--on-accent); padding:3px 8px; border-radius:999px; } .area-note{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:22px; padding:28px 30px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--line-soft); box-shadow:var(--shadow-soft); } .area-note h3{ font-size:1.35rem; margin-bottom:6px; } .area-note p{ margin:0; color:var(--text-dim); font-size:15px; } /* ---------- Gallery ---------- */ .gallery{ display:grid; gap:16px; grid-template-columns:repeat(4,1fr); } .shot{ position:relative; overflow:hidden; border-radius:var(--radius); border:1px solid var(--line-soft); background:var(--surface); padding:0; cursor:zoom-in; display:block; aspect-ratio:3/4; transition:transform .3s ease, border-color .3s ease; } .shot img{ width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.7,.2,1); } .shot::after{ content:""; position:absolute; inset:0; background:linear-gradient(transparent 45%, var(--shot-veil)); pointer-events:none; } .shot:hover{ transform:translateY(-4px); border-color:var(--violet); } .shot:hover img{ transform:scale(1.06); } .shot-cap{ position:absolute; inset:auto 0 0; z-index:1; padding:16px 18px; text-align:left; font-family:var(--body); font-size:13px; font-weight:600; letter-spacing:.03em; color:#FFFFFF; } /* ============================================================ VIDEO GRID (videos.html) ============================================================ */ .videos{ display:grid; gap:20px; grid-template-columns:repeat(3,1fr); } .vcard{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-soft); transition:transform .25s ease, border-color .25s ease; } .vcard:hover{ transform:translateY(-4px); border-color:var(--line); } .vframe{ position:relative; width:100%; aspect-ratio:9/16; background:var(--ink-2); overflow:hidden; } .vframe iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; } .vposter{ position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; cursor:pointer; background:none; display:block; } .vposter img{ width:100%; height:100%; object-fit:cover; } .vposter::after{ content:""; position:absolute; inset:0; background:linear-gradient(transparent 55%, rgba(6,5,12,.75)); transition:background .25s ease; } .vposter:hover::after{ background:linear-gradient(transparent 40%, rgba(6,5,12,.85)); } .vplay{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:66px; height:66px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg,var(--violet-bright),var(--violet-deep)); box-shadow:0 14px 40px -10px rgba(0,0,0,.6); transition:transform .25s ease; pointer-events:none; } .vposter:hover .vplay{ transform:translate(-50%,-50%) scale(1.09); } .vplay svg{ width:24px; height:24px; margin-left:3px; fill:#fff; stroke:none; } .vviews{ position:absolute; left:12px; top:12px; z-index:2; display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:999px; background:rgba(6,5,12,.72); backdrop-filter:blur(8px); font-size:12px; font-weight:700; color:#fff; letter-spacing:.02em; pointer-events:none; } .vviews svg{ width:13px; height:13px; stroke-width:2.2; } .vbody{ padding:18px 20px 20px; display:flex; flex-direction:column; gap:10px; flex:1; } .vcap{ margin:0; font-size:15px; font-weight:500; color:var(--text); line-height:1.5; } .vmeta{ margin:0; font-size:12.5px; color:var(--text-mute); letter-spacing:.04em; } .vtags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:4px; } .vtag{ font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; padding:4px 10px; border-radius:999px; background:var(--icon-bg); border:1px solid var(--icon-border); color:var(--violet-hot); } .vlink{ font-size:13px; font-weight:600; display:inline-flex; align-items:center; gap:6px; } .vlink svg{ width:14px; height:14px; stroke-width:2.3; } .video-note{ margin:32px 0 0; padding:20px 24px; background:var(--surface); border:1px dashed var(--line); border-radius:var(--radius); color:var(--text-dim); font-size:15px; } /* ============================================================ TESTIMONIALS ============================================================ */ .quotes{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); } .quote{ background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius); padding:28px 26px; box-shadow:var(--shadow-soft); display:flex; flex-direction:column; gap:16px; } .stars{ display:flex; gap:3px; color:var(--violet-hot); } .stars svg{ width:17px; height:17px; fill:currentColor; stroke:none; } .quote blockquote{ margin:0; font-size:15.5px; line-height:1.62; color:var(--text-dim); } .quote figcaption{ margin-top:auto; font-size:13.5px; color:var(--text-mute); } .quote figcaption strong{ display:block; color:var(--text); font-size:15px; font-weight:600; margin-bottom:2px; } .quotes-empty{ padding:36px 30px; text-align:center; border:1px dashed var(--line); border-radius:var(--radius); background:var(--surface); color:var(--text-dim); } .quotes-empty h3{ font-size:1.4rem; margin-bottom:10px; } .quotes-empty p{ margin:0 auto 20px; max-width:52ch; font-size:15px; } /* ============================================================ FAQ (faq.html) ============================================================ */ .faq{ display:grid; gap:12px; max-width:860px; } .faq details{ background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-soft); transition:border-color .2s ease; } .faq details[open]{ border-color:var(--line); } .faq summary{ cursor:pointer; list-style:none; padding:20px 56px 20px 24px; position:relative; font-family:var(--display); font-size:1.24rem; font-weight:700; text-transform:uppercase; letter-spacing:.005em; color:var(--text); } .faq summary::-webkit-details-marker{ display:none; } .faq summary::after{ content:""; position:absolute; right:24px; top:50%; width:11px; height:11px; margin-top:-6px; border-right:2.4px solid var(--violet-hot); border-bottom:2.4px solid var(--violet-hot); transform:rotate(45deg); transition:transform .25s ease; } .faq details[open] summary::after{ transform:rotate(-135deg); margin-top:-2px; } .faq summary:hover{ color:var(--violet-hot); } .faq .answer{ padding:0 24px 22px; color:var(--text-dim); font-size:15.5px; } .faq .answer p{ margin:0 0 12px; } .faq .answer p:last-child{ margin-bottom:0; } .faq .answer ul{ margin:0 0 12px; padding-left:22px; } .faq .answer li{ margin-bottom:6px; } /* ============================================================ SOCIALS ============================================================ */ .socials{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(262px,1fr)); } .social{ position:relative; overflow:hidden; display:flex; flex-direction:column; padding:28px 26px 26px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--line-soft); color:var(--text); box-shadow:var(--shadow-soft); transition:transform .25s ease, border-color .25s ease, background .25s ease; } .social:hover{ transform:translateY(-5px); color:var(--text); border-color:var(--line); background:var(--surface-2); } .social-glyph{ width:34px; height:34px; flex:none; margin-bottom:18px; fill:currentColor; stroke:none; } .social-fb .social-glyph{ color:#4C8BF5; } .social-ig .social-glyph{ color:#E1476F; fill:none; stroke:currentColor; stroke-width:1.7; } .social-tt .social-glyph{ color:#22D3EE; } .social-net{ font-family:var(--display); font-size:1.5rem; font-weight:700; text-transform:uppercase; line-height:1.1; } .social-handle{ font-size:14px; color:var(--text-dim); margin-top:4px; word-break:break-all; } .social-stat{ font-size:12.5px; color:var(--text-mute); margin-top:6px; font-weight:600; letter-spacing:.04em; } .social-go{ display:inline-flex; align-items:center; gap:7px; margin-top:20px; font-size:13px; font-weight:600; color:var(--violet-hot); letter-spacing:.03em; } .social-go svg{ width:15px; height:15px; stroke-width:2.3; transition:transform .25s ease; } .social:hover .social-go svg{ transform:translateX(4px); } /* ============================================================ CTA BAND ============================================================ */ .cta-band{ position:relative; overflow:hidden; padding:clamp(58px,7vw,92px) 0; background:var(--cta-bg); border-top:1px solid var(--line); } .cta-inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:32px; } .cta-inner h2{ font-size:clamp(2rem,4vw,3rem); margin-bottom:10px; color:var(--cta-text); } .cta-inner p{ margin:0; color:var(--cta-text-dim); max-width:46ch; } .cta-actions{ display:flex; flex-wrap:wrap; gap:13px; } .cta-band .btn-ghost{ background:var(--cta-ghost-bg); border-color:var(--cta-ghost-border); color:var(--cta-text); } .cta-band .btn-ghost:hover{ background:var(--cta-ghost-bg); border-color:#fff; color:#fff; } [data-theme="daylight"] .cta-band .btn-primary{ background:#fff; color:#4C1D95; } [data-theme="daylight"] .cta-band .btn-primary:hover{ color:#4C1D95; } /* ============================================================ FOOTER ============================================================ */ .site-footer{ background:var(--footer-bg); border-top:1px solid var(--line-soft); padding:clamp(50px,6vw,76px) 0 30px; } .footer-grid{ display:grid; gap:40px; grid-template-columns:1.5fr 1fr 1fr 1fr; padding-bottom:42px; } .footer-brand img{ width:72px; height:72px; border-radius:14px; border:1px solid var(--line); margin-bottom:16px; } .footer-name{ font-family:var(--display); font-size:1.5rem; font-weight:700; text-transform:uppercase; margin:0 0 7px; } .footer-tag{ margin:0; color:var(--text-mute); font-size:14px; line-height:1.6; } .footer-col h3{ font-size:1.05rem; letter-spacing:.09em; margin-bottom:16px; color:var(--text); } .footer-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; } .footer-list li{ font-size:14.5px; color:var(--text-dim); } .footer-list a{ color:var(--text-dim); } .footer-list a:hover{ color:var(--violet-hot); } .muted{ color:var(--text-mute); font-size:13px; } .footer-bottom{ display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; padding-top:26px; border-top:1px solid var(--line-soft); } .footer-bottom p{ margin:0; font-size:13px; color:var(--text-mute); } /* ============================================================ MOBILE STICKY BAR ============================================================ */ .mobile-bar{ display:none; position:fixed; inset:auto 0 0; z-index:95; gap:10px; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:var(--drawer-bg); backdrop-filter:blur(16px); border-top:1px solid var(--line); } .mobile-bar .btn{ flex:1; padding:14px 16px; } /* ============================================================ LIGHTBOX ============================================================ */ .lightbox{ position:fixed; inset:0; z-index:150; background:var(--lightbox-bg); backdrop-filter:blur(10px); display:grid; place-items:center; padding:32px; } .lightbox[hidden]{ display:none; } .lightbox img{ max-width:min(94vw,900px); max-height:88vh; width:auto; border-radius:var(--radius); box-shadow:var(--shadow); } .lightbox-close{ position:absolute; top:20px; right:22px; width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28); color:#fff; font-size:26px; line-height:1; cursor:pointer; } .lightbox-close:hover{ background:rgba(255,255,255,.22); } /* ============================================================ REVEAL ============================================================ */ .reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); } .reveal.is-in{ opacity:1; transform:none; } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } .reveal{ opacity:1; transform:none; transition:none; } .strip-track{ animation:none; } *{ transition-duration:.01ms !important; animation-duration:.01ms !important; } } /* ============================================================ INQUIRY PAGE ============================================================ */ .page-hero{ position:relative; overflow:hidden; padding:clamp(48px,6vw,80px) 0 clamp(38px,4vw,54px); border-bottom:1px solid var(--line-soft); } .page-hero::before{ content:""; position:absolute; inset:0; z-index:0; background:radial-gradient(ellipse 80% 120% at 12% -10%, var(--glow-1), transparent 62%); } .page-hero .wrap{ position:relative; z-index:1; } .page-hero h1{ font-size:clamp(2.4rem,5vw,3.8rem); margin-bottom:16px; } .page-hero .lede{ margin-bottom:0; } .inquiry-grid{ display:grid; grid-template-columns:1.45fr .85fr; gap:clamp(30px,4vw,54px); align-items:start; } .form-card{ background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius-lg); padding:clamp(26px,3.4vw,42px); box-shadow:var(--shadow-soft); } .form-grid{ display:grid; gap:19px; grid-template-columns:1fr 1fr; } .field{ display:flex; flex-direction:column; gap:8px; } .field-full{ grid-column:1 / -1; } .field label{ font-size:12.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--text-dim); } .field label .req{ color:var(--violet-hot); } .field .hint{ display:block; margin-top:6px; font-size:12.5px; color:var(--text-mute); letter-spacing:0; text-transform:none; font-weight:400; line-height:1.5; } /* Radio + checkbox labels are real sentences — undo the uppercase field-label styling */ .field label.radio-opt, .field label.consent{ font-size:inherit; font-weight:400; letter-spacing:normal; text-transform:none; color:var(--text); } .field input,.field select,.field textarea{ width:100%; font-family:var(--body); font-size:15.5px; color:var(--text); background:var(--input-bg); border:1px solid var(--line); border-radius:11px; padding:13px 15px; transition:border-color .2s ease, box-shadow .2s ease, background .2s ease; } .field textarea{ resize:vertical; min-height:132px; line-height:1.6; } .field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:17px; padding-right:42px; } .field input::placeholder,.field textarea::placeholder{ color:var(--text-mute); } .field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--violet-bright); box-shadow:0 0 0 3px color-mix(in srgb, var(--violet-bright) 16%, transparent); background:var(--input-bg-focus); } .field.has-error input,.field.has-error select,.field.has-error textarea{ border-color:#E11D48; box-shadow:0 0 0 3px rgba(225,29,72,.14); } .error-msg{ font-size:12.5px; color:#FB7185; } [data-theme="daylight"] .error-msg{ color:#BE123C; } .field:not(.has-error) .error-msg{ display:none; } .radio-set{ display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); } .radio-opt{ position:relative; display:flex; align-items:flex-start; gap:11px; padding:14px 16px; border-radius:11px; background:var(--input-bg); border:1px solid var(--line); cursor:pointer; transition:border-color .2s ease, background .2s ease; } .radio-opt input{ appearance:none; width:18px; height:18px; flex:none; margin:2px 0 0; border:2px solid var(--line); border-radius:50%; background:transparent; transition:border-color .2s ease, box-shadow .2s ease; } .radio-opt input:checked{ border-color:var(--violet-bright); box-shadow:inset 0 0 0 4px var(--violet-bright); } .radio-opt:has(input:checked){ border-color:var(--violet-bright); background:var(--ghost-bg-hover); } .radio-opt > span{ font-size:14.5px; line-height:1.4; font-weight:500; } .radio-opt small{ display:block; color:var(--text-mute); font-size:12.5px; margin-top:3px; font-weight:400; line-height:1.4; } .consent{ display:flex; align-items:flex-start; gap:12px; font-size:14.5px; color:var(--text-dim); line-height:1.55; cursor:pointer; } .consent input{ appearance:none; width:19px; height:19px; flex:none; margin:2px 0 0; border:2px solid var(--line); border-radius:5px; background:transparent; cursor:pointer; transition:background .2s ease, border-color .2s ease; } .consent input:checked{ background:var(--violet-bright); border-color:var(--violet-bright); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E"); background-size:13px; background-position:center; background-repeat:no-repeat; } .form-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:28px; padding-top:26px; border-top:1px solid var(--line-soft); } .form-alt{ font-size:13.5px; color:var(--text-mute); } .form-status{ margin-top:18px; padding:15px 18px; border-radius:11px; font-size:14.5px; border:1px solid var(--line); background:var(--input-bg); } .form-status[hidden]{ display:none; } .form-status.is-error{ border-color:rgba(225,29,72,.5); background:rgba(225,29,72,.09); color:#FDA4AF; } .form-status.is-ok{ border-color:rgba(22,163,74,.45); background:rgba(22,163,74,.09); color:#86EFAC; } [data-theme="daylight"] .form-status.is-error{ color:#9F1239; } [data-theme="daylight"] .form-status.is-ok{ color:#166534; } .aside-card{ background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius); padding:26px 26px 28px; margin-bottom:18px; box-shadow:var(--shadow-soft); } .aside-card h3{ font-size:1.25rem; margin-bottom:16px; } .contact-rows{ list-style:none; margin:0; padding:0; display:grid; gap:16px; } .contact-rows li{ display:flex; gap:13px; align-items:flex-start; } .contact-rows .ci{ width:36px; height:36px; flex:none; border-radius:10px; display:grid; place-items:center; background:var(--icon-bg); border:1px solid var(--icon-border); color:var(--violet-hot); } .contact-rows .ci svg{ width:18px; height:18px; } .contact-rows .cl{ display:block; font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--text-mute); margin-bottom:2px; } .contact-rows a,.contact-rows .cv{ font-size:15px; color:var(--text); font-weight:500; word-break:break-word; } .contact-rows a:hover{ color:var(--violet-hot); } .tips{ list-style:none; margin:0; padding:0; display:grid; gap:11px; } .tips li{ position:relative; padding-left:24px; font-size:14.5px; color:var(--text-dim); } .tips li::before{ content:""; position:absolute; left:0; top:.6em; width:7px; height:7px; border-radius:50%; background:var(--violet-bright); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:1080px){ .footer-grid{ grid-template-columns:1fr 1fr; } .gallery{ grid-template-columns:repeat(2,1fr); } .videos{ grid-template-columns:repeat(2,1fr); } } @media (max-width:940px){ .hero-grid,.about-grid,.inquiry-grid{ grid-template-columns:1fr; } /* Lead with the headline, not the photo — visitors need to know what this is first */ .hero-media{ max-width:520px; } .hero-actions{ margin-bottom:34px; } .framed img{ height:clamp(320px,58vw,440px); } .about-media{ max-width:560px; } .about-media img{ height:clamp(340px,60vw,460px); } .float-card{ left:auto; right:-8px; bottom:-22px; } } @media (max-width:860px){ /* Anchored to the bottom of the header so it can't drift if the header grows */ .nav{ position:absolute; top:100%; left:0; right:0; z-index:99; flex-direction:column; align-items:stretch; gap:2px; background:var(--drawer-bg); backdrop-filter:blur(20px); border-bottom:1px solid var(--line); padding:14px 22px 24px; transform:translateY(-14px); opacity:0; pointer-events:none; transition:transform .25s ease, opacity .25s ease; max-height:80vh; overflow-y:auto; } .nav.is-open{ transform:none; opacity:1; pointer-events:auto; } .nav a{ padding:14px 12px; font-size:16px; border-radius:10px; } .nav .nav-cta{ display:block; margin-top:10px; text-align:center; background:linear-gradient(135deg,var(--violet-bright),var(--violet-deep)); color:var(--on-accent); font-weight:600; } .nav .nav-cta:hover{ color:var(--on-accent); } .nav-toggle{ display:grid; } .phone-pill span{ display:none; } .phone-pill{ padding:11px; } .phone-pill svg{ width:18px; height:18px; } .mobile-bar{ display:flex; } body{ padding-bottom:82px; } } @media (max-width:860px){ .tiers{ grid-template-columns:1fr; } } @media (max-width:680px){ body{ font-size:16px; } .rates-note{ flex-direction:column; align-items:flex-start; } .rate-price{ font-size:2.3rem; } .form-grid{ grid-template-columns:1fr; } .gallery{ grid-template-columns:repeat(2,1fr); gap:12px; } .videos{ grid-template-columns:1fr; } .hero-trust{ gap:14px; } .hero-trust strong{ font-size:1.7rem; } .footer-grid{ grid-template-columns:1fr; gap:32px; } .cta-inner,.area-note{ flex-direction:column; align-items:flex-start; } .cta-actions,.form-actions{ width:100%; } .cta-actions .btn{ flex:1; } .float-card{ position:static; margin-top:16px; max-width:none; } .btn{ padding:14px 24px; } .faq summary{ font-size:1.1rem; padding:18px 48px 18px 20px; } } /* Keep the wordmark on one line so the header stays a predictable height */ @media (max-width:520px){ .header-inner{ gap:12px; min-height:70px; } .brand-mark{ width:38px; height:38px; border-radius:9px; } .brand-name{ font-size:18px; white-space:nowrap; } .brand-sub{ font-size:9.5px; letter-spacing:.07em; white-space:nowrap; } .nav-toggle{ width:40px; height:40px; } .phone-pill{ padding:10px; } } @media (max-width:360px){ .brand-sub{ display:none; } .brand-name{ font-size:16.5px; } }