/* ============ Embedded type (Fraunces, OFL-1.1, self-hosted) ============ */ @font-face { font-family: "Fraunces"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/fraunces-600-normal.woff2") format("woff2"); } @font-face { font-family: "Fraunces"; font-weight: 600; font-style: italic; font-display: swap; src: url("/fonts/fraunces-600-italic.woff2") format("woff2"); } @font-face { font-family: "Fraunces"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/fraunces-700-normal.woff2") format("woff2"); } /* ============ Tokens & reset ============ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --night: #1d1430; /* deep violet night */ --night-2: #251b3a; /* raised surface */ --night-3: #2e2347; /* card surface */ --ink: #16102a; /* darkest */ --cream: #f7efe2; /* headline / hero text */ --cream-dim: #cfc4e6; /* body text */ --faint: #8d81ad; /* muted */ --coral: #ff8f6b; /* warm accent */ --gold: #ffd166; /* star gold */ --lav: #b79cff; /* lavender */ --teal: #5ee6c8; /* mint-teal */ --mint: #3ae8a4; /* success mint */ --rose: #ff7ea8; /* rose */ --line: rgba(247,239,226,.14); --line-hi: rgba(247,239,226,.32); --r: 20px; --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; } html { scroll-behavior: smooth; scrollbar-color: #453764 #16102a; } ::-webkit-scrollbar { width: 13px; } ::-webkit-scrollbar-track { background: #16102a; } ::-webkit-scrollbar-thumb { background: #453764; border-radius: 8px; border: 3px solid #16102a; } ::-webkit-scrollbar-thumb:hover { background: #5a4a80; } a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2.5px solid var(--teal); outline-offset: 3px; border-radius: 6px; } .skip { position: fixed; left: 14px; top: -60px; z-index: 200; background: var(--gold); color: #3a2a08; font-weight: 700; font-size: 14px; padding: 10px 18px; border-radius: 999px; transition: top .3s; } .skip:focus { top: 14px; } body { background: var(--night); color: var(--cream-dim); font-family: var(--sans); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { color: inherit; text-decoration: none; } ::selection { background: rgba(255,143,107,.45); color: #fff; } h1, h2, h3, .serif { font-family: var(--serif); color: var(--cream); font-weight: 600; letter-spacing: -.01em; } /* ============ Night sky ============ */ .sky { position: fixed; inset: 0; z-index: -3; overflow: hidden; background: radial-gradient(ellipse 120% 80% at 50% -10%, #33265280 0%, transparent 60%), radial-gradient(ellipse 80% 60% at 85% 20%, rgba(255,126,168,.07), transparent 60%), radial-gradient(ellipse 70% 50% at 10% 30%, rgba(94,230,200,.05), transparent 60%), linear-gradient(180deg, #241a38 0%, var(--night) 45%, #1a1129 100%); } .sky::after { /* grain */ content: ""; position: absolute; inset: 0; opacity: .55; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 0.95 0 0 0 0 0.85 0 0 0 0.03 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } .sky, .sky-day { transition: opacity 1.4s ease; } .sky-day { position: fixed; inset: 0; z-index: -3; opacity: 0; pointer-events: none; background: radial-gradient(ellipse 90% 55% at 50% 108%, rgba(255,170,110,.55), transparent 62%), radial-gradient(ellipse 70% 45% at 72% 100%, rgba(255,126,168,.3), transparent 60%), linear-gradient(180deg, #241a3e 0%, #3a2650 40%, #6e3d5c 74%, #b0605c 100%); } body.dawn .sky { opacity: 0; } body.dawn .sky-day { opacity: 1; } body.dawn #stars { opacity: .22; } body.dawn .moon { filter: saturate(1.5) brightness(1.2) drop-shadow(0 0 34px rgba(255,190,120,.9)); } body.dawn .cloud { filter: brightness(1.9) saturate(1.2); } #stars { position: fixed; inset: 0; z-index: -2; pointer-events: none; transition: opacity 1.4s ease; } #constel { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; } .star { position: absolute; border-radius: 50%; background: var(--cream); animation: twinkle 4s ease-in-out infinite; } .star.g { background: var(--gold); } .star.l { background: var(--lav); } @keyframes twinkle { 0%,100% { opacity: .18; transform: scale(.8); } 50% { opacity: .95; transform: scale(1.15); } } .shooting { position: absolute; width: 90px; height: 1.5px; border-radius: 2px; background: linear-gradient(90deg, rgba(247,239,226,.9), transparent); transform: rotate(-24deg); opacity: 0; animation: shoot 9s ease-in 3s infinite; } @keyframes shoot { 0% { opacity: 0; transform: rotate(-24deg) translateX(0); } 2% { opacity: .9; } 6% { opacity: 0; transform: rotate(-24deg) translateX(-340px); } 100% { opacity: 0; } } /* parallax layers */ .clouds { position: fixed; inset: 0; z-index: -1; pointer-events: none; } .cloud { position: absolute; opacity: .9; will-change: transform; } .cloud svg { display: block; } .cloud.c1 { top: 12%; left: -140px; width: 300px; animation: cloudDrift 90s linear infinite; } .cloud.c2 { top: 30%; right: -180px; width: 380px; animation: cloudDrift 120s linear infinite reverse; opacity: .6; } .cloud.c3 { top: 62%; left: -100px; width: 240px; animation: cloudDrift 105s linear infinite; opacity: .45; } @keyframes cloudDrift { from { transform: translateX(-10vw); } to { transform: translateX(110vw); } } /* ============ Nav ============ */ header { position: fixed; inset: 0 0 auto 0; z-index: 80; display: flex; justify-content: center; padding: 16px 20px; border-bottom: 1px solid transparent; transition: background .4s, border-color .4s; } header.scrolled { background: rgba(29,20,48,.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--line); } nav { width: min(1140px,100%); display: flex; align-items: center; gap: 26px; } .logo { display: flex; align-items: center; gap: 11px; font-family: var(--serif); font-weight: 700; font-size: 21px; color: var(--cream); } .logo svg { width: 33px; height: 33px; display: block; } .logo .dab, .logo .lkey, .logo .lprompt { transform-box: fill-box; transform-origin: center; } .logo:hover .dab { animation: dabPop .6s cubic-bezier(.3,1.8,.4,1); } .logo:hover .dab:nth-of-type(2) { animation-delay: .09s; } .logo:hover .dab:nth-of-type(3) { animation-delay: .18s; } @keyframes dabPop { 45% { transform: scale(1.45); } 100% { transform: scale(1); } } .logo:hover .lkey, .logo:hover .lprompt { animation: keyPress .45s ease; } @keyframes keyPress { 40% { transform: translateY(1.6px); } 100% { transform: translateY(0); } } .nav-links { display: flex; gap: 2px; font-size: 14.5px; color: var(--cream-dim); } .nav-links a { padding: 8px 14px; border-radius: 999px; transition: color .25s, background .25s; } .nav-links a:hover { color: var(--cream); background: rgba(247,239,226,.08); } .nav-cta { margin-left: auto; display: flex; gap: 12px; align-items: center; } .lamp { width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--line-hi); background: rgba(247,239,226,.05); cursor: pointer; display: grid; place-items: center; color: var(--gold); transition: transform .3s cubic-bezier(.3,1.6,.5,1), background .3s, border-color .3s; } .lamp:hover { transform: rotate(14deg) scale(1.06); border-color: var(--cream); background: rgba(247,239,226,.1); } .lamp svg { width: 20px; height: 20px; } .lamp .ic-sun { display: none; } body.dawn .lamp .ic-sun { display: block; } body.dawn .lamp .ic-moon { display: none; } /* ============ Buttons ============ */ .btn { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 650; white-space: nowrap; padding: 12px 24px; border-radius: 999px; border: 1.5px solid var(--line-hi); color: var(--cream); background: transparent; cursor: pointer; transition: transform .25s cubic-bezier(.3,1.5,.5,1), background .25s, border-color .25s, box-shadow .25s; } .btn:hover { transform: translateY(-2px) rotate(-.5deg); border-color: var(--cream); background: rgba(247,239,226,.06); } .btn-primary { background: var(--coral); border-color: var(--coral); color: #2a130a; box-shadow: 0 6px 0 rgba(0,0,0,.28); } .btn-primary:hover { background: #ffa184; border-color: #ffa184; transform: translateY(-2px) rotate(.6deg); box-shadow: 0 8px 0 rgba(0,0,0,.28), 0 10px 40px rgba(255,143,107,.35); } .btn-primary:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,.28); } /* ============ Shared ============ */ section { width: min(1140px, calc(100% - 44px)); margin: 0 auto; position: relative; } .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); font-family: var(--sans); } .section-head { text-align: center; padding: 120px 0 56px; } .section-head h2 { margin-top: 18px; font-size: clamp(34px, 4.8vw, 56px); line-height: 1.08; } .section-head p { margin: 18px auto 0; max-width: 560px; color: var(--cream-dim); font-size: 17px; } .accent { color: var(--coral); font-style: italic; } /* squiggle underline */ .squig { position: relative; display: inline-block; } .squig svg { position: absolute; left: -2%; bottom: -.38em; width: 104%; height: .38em; overflow: visible; } .squig path { fill: none; stroke: var(--coral); stroke-width: 4.5; stroke-linecap: round; stroke-dasharray: 260; stroke-dashoffset: 260; } .squig.draw path { animation: squigDraw 1s ease .9s forwards; } @keyframes squigDraw { to { stroke-dashoffset: 0; } } /* ============ Hero ============ */ .hero { min-height: 100svh; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 130px 0 0; position: relative; } .hero-inner { width: min(980px, calc(100% - 44px)); margin: 0 auto; position: relative; z-index: 2; } .hero h1 { margin-top: 26px; font-size: clamp(44px, 7.6vw, 92px); line-height: 1.04; font-weight: 640; } .hero h1 .w { display: inline-block; opacity: 0; transform: translateY(30px) rotate(1.5deg); filter: blur(5px); animation: wordIn .9s cubic-bezier(.16,.8,.2,1) forwards; } @keyframes wordIn { to { opacity: 1; transform: none; filter: blur(0); } } .hero p.sub { margin: 26px auto 0; max-width: 620px; color: var(--cream-dim); font-size: clamp(16.5px, 2vw, 19.5px); } .hero .cta-row { display: flex; gap: 16px; margin-top: 38px; justify-content: center; flex-wrap: wrap; } .hero-note { margin-top: 18px; font-size: 13.5px; color: var(--faint); font-style: italic; font-family: var(--serif); } .scroll-hint { margin: 54px auto 0; display: flex; flex-direction: column; align-items: center; gap: 9px; color: var(--faint); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-family: var(--sans); } .scroll-hint .mouse { width: 23px; height: 36px; border: 1.5px solid var(--faint); border-radius: 12px; position: relative; } .scroll-hint .mouse::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 6px; margin-left: -1.5px; border-radius: 3px; background: var(--gold); animation: wheel 1.9s ease-in-out infinite; } @keyframes wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(11px); opacity: 0; } 100% { opacity: 0; } } @media (max-width: 900px) { .scroll-hint { display: none; } } /* floating scene pieces */ .scene { position: absolute; inset: 0; pointer-events: none; z-index: 1; } .float { position: absolute; will-change: transform; } .bob { animation: bob 7s ease-in-out infinite; } .bob2 { animation: bob 9s ease-in-out -3s infinite; } @keyframes bob { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-16px) rotate(1.2deg); } } .isle-l { left: max(2vw, 8px); top: 40vh; bottom: auto; width: clamp(150px, 17vw, 250px); } .isle-r { right: max(2vw, 8px); top: 24vh; bottom: auto; width: clamp(120px, 13vw, 200px); } .balloon { left: 12vw; top: 14vh; width: clamp(60px, 7vw, 104px); animation: balloonDrift 30s ease-in-out infinite; } @keyframes balloonDrift { 0%,100% { transform: translate(0,0) rotate(-2deg); } 25% { transform: translate(4vw,-3vh) rotate(2deg); } 55% { transform: translate(8vw,1vh) rotate(-1deg); } 80% { transform: translate(3vw,-2vh) rotate(2.5deg); } } .moon { right: 10vw; top: 12vh; width: clamp(60px, 6vw, 92px); animation: bob 11s ease-in-out infinite; } @media (max-width: 900px) { .isle-l, .isle-r { display: none; } .balloon { width: 52px; left: 5vw; top: 8.5vh; } .moon { width: 44px; right: 6vw; top: 9vh; } .nav-links { display: none; } nav.menu-open .nav-links { display: flex; flex-direction: column; gap: 4px; position: absolute; top: 70px; left: 16px; right: 16px; z-index: 95; background: var(--night-2); border: 1.5px solid var(--line-hi); border-radius: 18px; padding: 14px; box-shadow: 0 10px 0 rgba(0,0,0,.28), 0 30px 80px rgba(0,0,0,.55); } nav.menu-open .nav-links a { padding: 13px 16px; font-size: 16px; } .nav-cta .btn-primary { padding: 10px 16px; font-size: 14px; } nav .nav-cta .burger { display: grid; } } .burger { display: none; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--line-hi); background: rgba(247,239,226,.05); cursor: pointer; place-items: center; color: var(--cream); flex: none; } .burger svg { width: 19px; height: 19px; } .burger .x { display: none; } nav.menu-open .burger .bars { display: none; } nav.menu-open .burger .x { display: block; } /* birds */ .bird { width: 26px; opacity: 0; } .bird.b1 { top: 21%; animation: birdDrift 52s linear 4s infinite; } .bird.b2 { top: 15%; width: 19px; animation: birdDrift 67s linear 18s infinite; } @keyframes birdDrift { 0% { opacity: 0; transform: translateX(-6vw) translateY(0); } 4% { opacity: 1; } 50% { transform: translateX(50vw) translateY(-3vh); } 96% { opacity: 1; } 100% { opacity: 0; transform: translateX(104vw) translateY(1vh); } } /* mascot */ .mascot { position: absolute; right: 6.5%; bottom: 34%; width: clamp(96px, 9.5vw, 136px); line-height: 0; z-index: 2; } @media (max-width: 900px) { .mascot { display: none; } } /* wandering balloon (scroll journey) */ #wander { position: fixed; left: 3vw; top: 0; width: 46px; z-index: 4; opacity: 0; pointer-events: none; transition: opacity .9s ease; line-height: 0; } @media (max-width: 900px) { #wander { display: none; } } /* painted swash behind accent words */ .accent { position: relative; z-index: 0; } .accent::before { content: ""; position: absolute; left: -5%; right: -5%; top: 6%; bottom: -10%; z-index: -1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M8 34 Q28 8 62 14 T124 11 T192 24 Q198 40 172 48 T84 55 T10 47 Z' fill='%23ff8f6b' fill-opacity='.15'/%3E%3C/svg%3E") no-repeat center / 100% 100%; transform: rotate(-1.6deg); } .squig .sq2 { stroke: var(--gold); opacity: 0; stroke-width: 4; } .squig.draw .sq2 { animation: squigDraw 1s ease 1.05s forwards; opacity: .55; } /* why-us honest columns */ .why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding-bottom: 30px; } @media (max-width: 900px) { .why-grid { grid-template-columns: 1fr; } } .why-card { border-radius: var(--r); border: 1.5px solid var(--line); padding: 32px 30px; background: var(--night-3); box-shadow: 0 6px 0 rgba(0,0,0,.28); transition: transform .35s cubic-bezier(.3,1.5,.5,1), border-color .3s; } .why-card.yes { transform: rotate(-.5deg); } .why-card.no { transform: rotate(.5deg); } .why-card:hover { transform: translateY(-6px) rotate(0); border-color: var(--line-hi); } .why-card h3 { font-size: 22px; display: flex; align-items: center; gap: 12px; } .why-card .wg { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-family: var(--sans); font-size: 15px; font-weight: 800; flex: none; } .why-card.yes .wg { background: rgba(58,232,164,.16); color: var(--mint); border: 1.5px solid rgba(58,232,164,.5); } .why-card.no .wg { background: rgba(255,126,168,.14); color: var(--rose); border: 1.5px solid rgba(255,126,168,.45); } .why-card ul { margin-top: 20px; list-style: none; display: grid; gap: 14px; color: var(--cream-dim); font-size: 15px; } .why-card li { position: relative; padding-left: 24px; } .why-card li::before { content: "✦"; position: absolute; left: 2px; top: .2em; font-size: 12px; } .why-card.yes li::before { color: var(--mint); } .why-card.no li::before { color: var(--rose); } .why-card em { color: var(--cream); font-family: var(--serif); } /* worknight — the night arc (moonset to sunrise) */ .worknight { width: min(1100px, calc(100% - 44px)); margin: 0 auto; padding: 10px 0 84px; text-align: center; } .worknight-cap { font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--cream); margin-bottom: 6px; } .worknight-note { margin-top: 10px; font-size: 14px; color: var(--faint); font-style: italic; font-family: var(--serif); } .nightarc { position: relative; height: clamp(210px, 24vw, 300px); margin: 12px 0 4px; } .nightarc::after { content: ""; position: absolute; right: -2%; bottom: -6%; width: 30%; height: 70%; background: radial-gradient(closest-side, rgba(255,209,102,.14), transparent); filter: blur(18px); pointer-events: none; } .arcpath { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .arcpath path { fill: none; stroke: rgba(247,239,226,.22); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-dasharray: 100; } .arcstops { list-style: none; margin: 0; padding: 0; } .arcstop { position: absolute; transform: translate(-50%, -50%); width: 10px; height: 10px; } .arcstop::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--chip, var(--lav)); box-shadow: 0 0 10px var(--chip, var(--lav)), 0 0 22px var(--chip, var(--lav)); animation: starTw 3.4s ease-in-out infinite; } .a1 { left: 8%; top: 19.8%; --chip: var(--lav); } .a2 { left: 36%; top: 34.9%; --chip: var(--teal); } .a3 { left: 64%; top: 57.7%; --chip: var(--mint); } .a4 { left: 92%; top: 79.3%; --chip: var(--gold); } .aico { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); line-height: 0; } .aico svg { width: 30px; height: 30px; } .aico img { display: block; width: 44px; height: auto; filter: drop-shadow(0 0 14px rgba(255,209,102,.35)); } .aico-sun svg { filter: drop-shadow(0 0 12px rgba(255,209,102,.5)); } .alabel { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); width: max-content; max-width: 190px; font-size: 14.5px; color: #a89cc8; } @media (prefers-reduced-motion: no-preference) { .worknight:not(.in) .arcpath path { stroke-dashoffset: 100; } .worknight:not(.in) .arcstop { opacity: 0; } .worknight.in .arcpath path { animation: skyDraw 1.7s ease .15s both; } .worknight.in .arcstop { animation: arcPop .5s cubic-bezier(.3,1.6,.5,1) backwards; } .worknight.in .a1 { animation-delay: .25s; } .worknight.in .a2 { animation-delay: .72s; } .worknight.in .a3 { animation-delay: 1.22s; } .worknight.in .a4 { animation-delay: 1.75s; } } @keyframes arcPop { from { opacity: 0; transform: translate(-50%, -50%) scale(.4); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } @media (max-width: 760px) { .nightarc { height: auto; } .arcpath, .nightarc::after { display: none; } .arcstops { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 14px; padding: 8px 0 2px; } .arcstop, .worknight:not(.in) .arcstop, .worknight.in .arcstop { position: static; transform: none; width: auto; height: auto; opacity: 1; animation: none; } .arcstop::before { display: none; } .aico { position: static; transform: none; display: block; margin-bottom: 8px; } .aico img { margin: 0 auto; } .alabel { position: static; transform: none; display: block; max-width: none; width: auto; } } /* spot vignettes */ .vignette { margin-bottom: 4px; border-radius: 12px; border: 1.5px solid var(--line); overflow: hidden; background: linear-gradient(180deg, #1b1332, #241a3d); line-height: 0; } .vignette svg { width: 100%; height: auto; display: block; } .keySpin { transform-box: fill-box; transform-origin: 29% 50%; animation: keySpinA 5s linear infinite; } @keyframes keySpinA { to { transform: rotate(360deg); } } .beam2 { transform-box: fill-box; transform-origin: 0% 45%; animation: beamSweepA 7.5s ease-in-out infinite; } @keyframes beamSweepA { 0%,100% { transform: rotate(-13deg); opacity: .5; } 50% { transform: rotate(14deg); opacity: 1; } } /* FAQ peeker */ .faq-wrap { position: relative; } .peeker { position: absolute; top: -46px; right: 34px; width: 76px; z-index: 0; line-height: 0; transform: rotate(5deg); transition: transform .45s cubic-bezier(.3,1.5,.5,1); } .faq-wrap:hover .peeker { transform: rotate(0deg) translateY(-6px); } .faq { position: relative; z-index: 1; } /* hills at hero base */ .hills { position: relative; margin-top: 60px; width: 100%; line-height: 0; } /* ============ Services (sticker cards) ============ */ #services { padding-bottom: 20px; } .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } @media (max-width: 900px) { .cards { grid-template-columns: 1fr; } } .card { position: relative; border-radius: var(--r); padding: 30px 28px 28px; background: var(--night-3); border: 1.5px solid var(--line); box-shadow: 0 6px 0 rgba(0,0,0,.28); transition: transform .35s cubic-bezier(.3,1.5,.5,1), border-color .3s, box-shadow .3s; } .card:nth-child(odd) { transform: rotate(-.5deg); } .card:nth-child(even) { transform: rotate(.5deg); } .card:hover { transform: translateY(-7px) rotate(0deg); border-color: var(--line-hi); box-shadow: 0 12px 0 rgba(0,0,0,.24), 0 22px 60px rgba(0,0,0,.4); } .card .doodle { width: 64px; height: 64px; } .card .doodle svg { width: 100%; height: 100%; overflow: visible; } .doodle path, .doodle circle, .doodle rect, .doodle ellipse, .doodle line, .doodle polyline { fill: none; stroke: var(--cream); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .doodle .fillc { fill: rgba(255,143,107,.22); stroke: var(--coral); } .doodle .fillt { fill: rgba(94,230,200,.16); stroke: var(--teal); } .doodle .fillg { fill: rgba(255,209,102,.16); stroke: var(--gold); } .doodle .filll { fill: rgba(183,156,255,.18); stroke: var(--lav); } .card.revealed .doodle path, .card.revealed .doodle circle, .card.revealed .doodle rect, .card.revealed .doodle ellipse, .card.revealed .doodle polyline { stroke-dasharray: 320; stroke-dashoffset: 320; animation: drawIn 1.3s ease forwards; } @keyframes drawIn { to { stroke-dashoffset: 0; } } .card h3 { margin-top: 20px; font-size: 22px; } .card > p { margin-top: 10px; color: var(--cream-dim); font-size: 15px; } .card .pin { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffe2a8, var(--gold) 60%, #c79a2e); box-shadow: 0 3px 6px rgba(0,0,0,.4); } /* ============ Story / automation ============ */ .story { background: var(--ink); } .duo { width: min(1140px, calc(100% - 44px)); margin: 0 auto; display: grid; grid-template-columns: 1fr 1.12fr; gap: 56px; align-items: center; padding: 90px 0; } @media (max-width: 900px) { .duo { grid-template-columns: 1fr; } } .duo-copy h2 { font-size: clamp(30px, 4vw, 46px); line-height: 1.1; margin-top: 18px; } .duo-copy > p { margin-top: 18px; color: var(--cream-dim); font-size: 16.5px; } .check-list { margin-top: 26px; display: grid; gap: 14px; font-size: 15.5px; color: var(--cream-dim); list-style: none; } .check-list li { display: flex; gap: 12px; align-items: baseline; } .check-list li::before { content: "✦"; color: var(--gold); } .term { border-radius: var(--r); border: 1.5px solid var(--line); overflow: hidden; background: #140e24; box-shadow: 0 10px 0 rgba(0,0,0,.3), 0 30px 90px rgba(0,0,0,.5); transform: rotate(1deg); transition: transform .5s cubic-bezier(.3,1.4,.5,1); } .term:hover { transform: rotate(0deg) translateY(-4px); } .term-bar { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1.5px solid var(--line); background: rgba(247,239,226,.04); } .term-bar b { width: 12px; height: 12px; border-radius: 50%; } .term-bar b:nth-child(1) { background: var(--rose); } .term-bar b:nth-child(2) { background: var(--gold); } .term-bar b:nth-child(3) { background: var(--teal); } .term-tabs { margin-left: 12px; display: flex; gap: 6px; } .term-tab { font-family: var(--mono); font-size: 11.5px; color: var(--faint); padding: 5px 12px; border-radius: 8px; } .term-tab.on { color: var(--cream); background: rgba(247,239,226,.09); } .term pre { padding: 24px; font-family: var(--mono); font-size: 13.4px; line-height: 1.75; color: #d9d0ea; min-height: 300px; white-space: pre-wrap; word-break: break-word; } .tk { color: var(--lav); } .ts { color: var(--teal); } .tf { color: #8fc7ff; } .tc { color: #6f6590; } .tw { color: var(--gold); } .caret { display: inline-block; width: 8px; height: 15px; background: var(--coral); vertical-align: -2px; animation: blink 1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } /* wavy dividers */ .wave { display: block; width: 100%; height: auto; line-height: 0; } .wave svg { display: block; width: 100%; height: auto; } .wave.flip { transform: scaleY(-1); } .journey-path svg { width: 100%; height: 100%; } .mt-10 { margin-top: 10px; } /* ============ Team ============ */ .team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } @media (max-width: 900px) { .team-grid { grid-template-columns: 1fr; } } .member { position: relative; border-radius: var(--r); border: 1.5px solid var(--line); padding: 30px; background: var(--night-3); box-shadow: 0 6px 0 rgba(0,0,0,.28); transition: transform .35s cubic-bezier(.3,1.5,.5,1), border-color .3s; } .member:nth-child(1) { transform: rotate(-.6deg); } .member:nth-child(3) { transform: rotate(.6deg); } .member:hover { transform: translateY(-6px) rotate(0); border-color: var(--line-hi); } .member .ava { width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 32% 30%, rgba(247,239,226,.16), rgba(247,239,226,.05)); border: 1.5px solid var(--line-hi); } .member .ava svg { width: 36px; height: 36px; overflow: visible; } .member .ava path, .member .ava circle, .member .ava rect, .member .ava ellipse { fill: none; stroke: var(--cream); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .member:nth-child(1) .ava { border-color: rgba(255,143,107,.6); background: radial-gradient(circle at 32% 30%, rgba(255,143,107,.22), rgba(255,143,107,.05)); } .member:nth-child(1) .ava path, .member:nth-child(1) .ava rect { stroke: var(--coral); } .member:nth-child(2) .ava { border-color: rgba(94,230,200,.55); background: radial-gradient(circle at 32% 30%, rgba(94,230,200,.2), rgba(94,230,200,.05)); } .member:nth-child(2) .ava path, .member:nth-child(2) .ava ellipse { stroke: var(--teal); } .member:nth-child(3) .ava { border-color: rgba(255,209,102,.55); background: radial-gradient(circle at 32% 30%, rgba(255,209,102,.2), rgba(255,209,102,.05)); } .member:nth-child(3) .ava path, .member:nth-child(3) .ava polyline { stroke: var(--gold); } .member h3 { margin-top: 20px; font-size: 21px; } .member .role { color: var(--teal); font-size: 13px; font-weight: 700; letter-spacing: .05em; margin-top: 4px; font-family: var(--sans); } .member p { margin-top: 12px; color: var(--cream-dim); font-size: 14.6px; } .member .stack { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .member .stack span { font-size: 12px; font-weight: 650; color: var(--cream-dim); border: 1.5px solid var(--line); border-radius: 999px; padding: 5px 12px; background: rgba(247,239,226,.04); } /* ============ Process (journey) ============ */ .journey { position: relative; padding: 30px 0 70px; } .journey-path { position: absolute; left: 4%; right: 4%; top: 8px; height: 40px; pointer-events: none; } .journey-path path { fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 8 12; opacity: .7; } .journey-path .draw { stroke-dasharray: 1400; stroke-dashoffset: 1400; transition: stroke-dashoffset 2.2s ease .2s; opacity: 1; } .journey.in .journey-path .draw { stroke-dashoffset: 0; } .jsteps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 46px; } @media (max-width: 900px) { .jsteps { grid-template-columns: 1fr; } .journey-path { display: none; } } .jstep { position: relative; border-radius: var(--r); border: 1.5px solid var(--line); padding: 30px 22px 26px; background: var(--night-3); box-shadow: 0 6px 0 rgba(0,0,0,.28); transition: transform .3s cubic-bezier(.3,1.5,.5,1), border-color .3s; } .jstep:hover { transform: translateY(-6px); border-color: var(--line-hi); } .jstep .badge { position: absolute; top: -17px; left: 22px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-weight: 700; font-size: 15px; color: #2a130a; background: var(--coral); box-shadow: 0 4px 0 rgba(0,0,0,.3); } .jstep:nth-child(2) .badge { background: var(--gold); } .jstep:nth-child(3) .badge { background: var(--teal); } .jstep:nth-child(4) .badge { background: var(--lav); } .jstep h3 { font-size: 19px; margin-top: 4px; } .jstep p { margin-top: 9px; color: var(--cream-dim); font-size: 14.4px; } /* ============ Stats (starlight numerals) ============ */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 34px 0 96px; } @media (max-width: 900px) { .stats { grid-template-columns: repeat(2, 1fr); row-gap: 44px; } } .stat { position: relative; text-align: center; padding: 8px 12px; } .stat + .stat::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 66px; background: linear-gradient(180deg, transparent, rgba(247,239,226,.22), transparent); } @media (max-width: 900px) { .stat:nth-child(3)::before { display: none; } } .stat b { --st: var(--gold); display: block; font-family: var(--serif); font-weight: 700; font-size: clamp(38px, 4.2vw, 54px); color: var(--st); font-variant-numeric: tabular-nums; text-shadow: 0 0 26px color-mix(in srgb, var(--st) 40%, transparent); transition: text-shadow .35s ease; } .stat:hover b { text-shadow: 0 0 34px color-mix(in srgb, var(--st) 65%, transparent); } .stat:nth-child(2) b { --st: var(--teal); } .stat:nth-child(3) b { --st: var(--coral); } .stat:nth-child(4) b { --st: var(--lav); } .stat span { display: block; margin-top: 8px; color: var(--faint); font-size: 12px; letter-spacing: .15em; text-transform: uppercase; } .stat::after { content: "✦"; display: block; margin-top: 14px; font-size: 10px; color: rgba(247,239,226,.28); } /* ============ Final CTA ============ */ .final { text-align: center; padding: 110px 24px 60px; position: relative; width: 100%; overflow: hidden; } .final h2 { font-size: clamp(36px, 5.6vw, 68px); line-height: 1.06; } .final p { color: var(--cream-dim); margin: 20px auto 0; max-width: 500px; font-size: 17px; } .final .cta-row { display: flex; gap: 16px; justify-content: center; margin-top: 40px; flex-wrap: wrap; } .final .lantern { position: absolute; width: 54px; opacity: .9; pointer-events: none; } .final .lantern.k1 { left: 12%; top: 20%; animation: bob 8s ease-in-out infinite; } .final .lantern.k2 { right: 14%; top: 32%; width: 40px; animation: bob 10s ease-in-out -4s infinite; } /* ============ Footer ============ */ footer { background: var(--ink); padding: 0 22px 70px; } .foot { width: min(1140px,100%); margin: 40px auto 0; display: flex; flex-wrap: wrap; gap: 36px; justify-content: space-between; color: var(--faint); font-size: 14px; } .foot a:hover { color: var(--cream); } .foot .cols { display: flex; gap: 56px; flex-wrap: wrap; } .foot .col { display: grid; gap: 10px; align-content: start; } .foot .col b { color: var(--cream-dim); font-weight: 650; margin-bottom: 4px; } .foot .tagline { margin-top: 12px; font-family: var(--serif); font-style: italic; color: var(--faint); } /* ============ Testimonials (gallery plaques) ============ */ .plaques { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; padding-bottom: 20px; } @media (max-width: 900px) { .plaques { grid-template-columns: 1fr; } } .plaque { position: relative; border-radius: var(--r); border: 1.5px solid var(--line); padding: 34px 28px 26px; background: var(--night-3); box-shadow: 0 6px 0 rgba(0,0,0,.28); transition: transform .35s cubic-bezier(.3,1.5,.5,1), border-color .3s; } .plaque:nth-child(1) { transform: rotate(-.5deg); } .plaque:nth-child(3) { transform: rotate(.5deg); } .plaque:hover { transform: translateY(-6px) rotate(0); border-color: var(--line-hi); } .plaque .qmark { position: absolute; top: -20px; left: 24px; font-family: var(--serif); font-size: 64px; line-height: 1; color: var(--coral); } .plaque blockquote { font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.6; color: var(--cream); } .plaque .brass { margin-top: 22px; display: inline-block; border-radius: 8px; padding: 8px 14px; background: linear-gradient(160deg, #ffe2a8, var(--gold) 55%, #d8a83c); color: #3a2a08; font-size: 12.5px; font-weight: 700; line-height: 1.35; box-shadow: 0 3px 0 rgba(0,0,0,.3); } .plaque .brass small { display: block; font-weight: 600; opacity: .8; } .plaques-note { text-align: center; color: var(--faint); font-size: 12.5px; font-style: italic; padding-bottom: 10px; } /* ============ Engagement tiers ============ */ .tiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 900px; margin: 0 auto; padding-bottom: 30px; align-items: stretch; } @media (max-width: 900px) { .tiers { grid-template-columns: 1fr; max-width: 560px; } } .tier { position: relative; border-radius: var(--r); border: 1.5px solid var(--line); padding: 34px 28px; background: var(--night-3); box-shadow: 0 6px 0 rgba(0,0,0,.28); display: flex; flex-direction: column; transition: transform .35s cubic-bezier(.3,1.5,.5,1), border-color .3s; } .tier:hover { transform: translateY(-6px); border-color: var(--line-hi); } .tier h3 { font-size: 24px; } .tier .kicker { color: var(--teal); font-size: 13px; font-weight: 700; margin-top: 4px; font-family: var(--sans); } .tier .kicker-hot { color: var(--coral); } .tier > p { margin-top: 12px; color: var(--cream-dim); font-size: 14.8px; } .tier ul { margin: 18px 0 26px; display: grid; gap: 10px; list-style: none; font-size: 14.3px; color: var(--cream-dim); flex: 1; } .tier ul li { display: flex; gap: 10px; align-items: baseline; } .tier ul li::before { content: "✦"; color: var(--gold); font-size: 12px; } .tier .btn { justify-content: center; } /* ============ FAQ ============ */ .faq-wrap { max-width: 760px; margin: 0 auto; padding-bottom: 40px; } /* gallery-catalogue FAQ: gilt numerals, hairline rules, no boxes */ .faq-wrap { counter-reset: faqn; } .faq { counter-increment: faqn; background: transparent; border: 0; border-top: 1px solid; border-image: linear-gradient(90deg, transparent, rgba(255,209,102,.30) 18%, rgba(247,239,226,.18) 82%, transparent) 1; transition: background .4s; } .faq:last-of-type { border-bottom: 1px solid; border-image: linear-gradient(90deg, transparent, rgba(255,209,102,.30) 18%, rgba(247,239,226,.18) 82%, transparent) 1; } .faq[open] { background: radial-gradient(130% 110% at 50% 0, rgba(255,209,102,.05), transparent 72%); } .faq summary { cursor: pointer; list-style: none; position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 25px 16px 25px 68px; font-family: var(--serif); font-size: 19px; color: var(--cream); font-weight: 600; transition: color .3s; } .faq summary::-webkit-details-marker { display: none; } .faq summary::before { content: counter(faqn, decimal-leading-zero); position: absolute; left: 14px; top: 28px; font-style: italic; font-weight: 600; font-size: 15px; color: rgba(255,209,102,.5); transition: color .3s, text-shadow .3s; } .faq summary:hover, .faq[open] summary { color: #fff6e6; } .faq summary:hover::before, .faq[open] summary::before { color: var(--gold); text-shadow: 0 0 14px rgba(255,209,102,.55); } .faq summary::after { content: "✦"; font-size: 15px; color: var(--faint); flex: none; transition: transform .45s cubic-bezier(.3,1.5,.5,1), color .3s; } .faq[open] summary::after { transform: rotate(135deg); color: var(--gold); } .faq .a { margin: 0 16px 28px 68px; padding-left: 18px; border-left: 2px solid; border-image: linear-gradient(180deg, rgba(255,209,102,.5), transparent) 1; color: var(--cream-dim); font-size: 15px; } @media (prefers-reduced-motion: no-preference) { .faq[open] .a { animation: faqOpen .4s ease; } } @keyframes faqOpen { from { opacity: 0; transform: translateY(-7px); } } @media (max-width: 640px) { .faq summary { padding-left: 46px; font-size: 17px; } .faq summary::before { left: 4px; } .faq .a { margin-left: 46px; } } /* ============ Reveal ============ */ .reveal { opacity: 0; transform: translateY(34px); transition: opacity .9s cubic-bezier(.16,.8,.2,1), transform .9s cubic-bezier(.16,.8,.2,1); } .reveal.in { opacity: 1; transform: none; } .reveal[data-delay="1"] { transition-delay: .12s; } .reveal[data-delay="2"] { transition-delay: .24s; } .reveal[data-delay="3"] { transition-delay: .36s; } /* keep sticker rotation after reveal */ .card.reveal.in:nth-child(odd) { transform: rotate(-.5deg); } .card.reveal.in:nth-child(even) { transform: rotate(.5deg); } .member.reveal.in:nth-child(1) { transform: rotate(-.6deg); } .member.reveal.in:nth-child(3) { transform: rotate(.6deg); } .stat.reveal.in:nth-child(odd) { transform: rotate(-.7deg); } .stat.reveal.in:nth-child(even) { transform: rotate(.7deg); } /* ============ Reduced motion ============ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; } html { scroll-behavior: auto; } .reveal, .hero .w { opacity: 1; transform: none; filter: none; } .squig path { stroke-dashoffset: 0; } .journey .journey-path .draw { stroke-dashoffset: 0; } .card.revealed .doodle path, .card.revealed .doodle circle, .card.revealed .doodle rect, .card.revealed .doodle ellipse, .card.revealed .doodle polyline { stroke-dashoffset: 0; animation: none; } .cloud, .shooting { display: none; } } /* ============ Contact form ============ */ /* editorial underline form: two-column, gilt labels, gradient focus underline */ .contact-form { max-width: 640px; margin: 52px auto 0; text-align: left; display: grid; grid-template-columns: 1fr 1fr; gap: 30px 30px; } .contact-form .field:nth-of-type(3), .contact-form .btn, .contact-form .form-note { grid-column: 1 / -1; } .field label { display: block; font-size: 11.5px; font-weight: 750; color: var(--faint); margin-bottom: 4px; letter-spacing: .16em; text-transform: uppercase; transition: color .3s; } .field:focus-within label { color: var(--gold); } .field input, .field textarea { width: 100%; border: 0; border-radius: 0; background-color: transparent; border-bottom: 1.5px solid rgba(247,239,226,.22); color: var(--cream); padding: 10px 2px 12px; font: inherit; font-size: 16.5px; caret-color: var(--teal); background-image: linear-gradient(90deg, var(--teal), var(--mint)); background-repeat: no-repeat; background-size: 0% 2px; background-position: 0 100%; transition: background-size .45s cubic-bezier(.3,.9,.4,1), border-color .3s; } .field input:hover, .field textarea:hover { border-bottom-color: rgba(247,239,226,.4); } .field input:focus, .field textarea:focus { outline: none; background-size: 100% 2px; } .field input:-webkit-autofill, .field textarea:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--night) inset; -webkit-text-fill-color: var(--cream); transition: background-color 99999s ease-out; } .field textarea { resize: vertical; min-height: 140px; line-height: 1.6; } .field .err { color: #ff9d9d; font-size: 13px; margin-top: 7px; } .contact-form .btn { justify-content: center; width: 100%; margin-top: 2px; padding: 15px 24px; font-size: 16px; } @media (max-width: 640px) { .contact-form { grid-template-columns: 1fr; gap: 26px; } } .form-note { text-align: center; font-size: 13.5px; color: var(--faint); } .form-note a { color: var(--cream-dim); text-decoration: underline; text-underline-offset: 3px; } .form-note a:hover { color: var(--cream); } .form-ok { margin: 30px auto 0; max-width: 560px; border: 1.5px solid rgba(94,230,200,.5); background: rgba(94,230,200,.09); color: var(--cream); padding: 14px 18px; border-radius: 14px; font-size: 15px; } .form-err-banner { margin: 30px auto 0; max-width: 560px; border: 1.5px solid rgba(255,143,107,.55); background: rgba(255,143,107,.09); color: var(--cream); padding: 14px 18px; border-radius: 14px; font-size: 15px; } .hp-wrap { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } /* ================================================================ "Stunning pass" additions — scroll depth, hero intro, aurora, micro-interactions, case-study frames, 404 page ================================================================ */ /* ---------- Paint-wipe page intro (pure CSS, one-shot) ---------- */ .intro { position: fixed; inset: 0; z-index: 300; pointer-events: none; } .intro::before, .intro::after { content: ""; position: absolute; inset: -2% 0 auto 0; height: 104%; } .intro::before { /* coral leading brush band */ z-index: 2; background: linear-gradient(180deg, #ffa184, var(--coral) 60%, #e5734f); border-radius: 0 0 46% 54% / 0 0 90px 70px; animation: introWipe .8s cubic-bezier(.72,.02,.26,.99) .12s forwards; } .intro::after { /* night curtain beneath */ z-index: 1; background: linear-gradient(180deg, var(--night-2), var(--ink)); border-radius: 0 0 54% 46% / 0 0 70px 90px; animation: introWipe .8s cubic-bezier(.72,.02,.26,.99) .32s forwards; } @keyframes introWipe { to { transform: translateY(-112%); } } /* ---------- Aurora ribbons in the night sky ---------- */ .sky::before { content: ""; position: absolute; left: -12%; right: -12%; top: -18%; height: 68%; z-index: 0; pointer-events: none; mix-blend-mode: screen; opacity: .5; filter: blur(46px); background: radial-gradient(42% 16% at 24% 38%, rgba(94,230,200,.4), transparent 70%), radial-gradient(50% 14% at 58% 26%, rgba(183,156,255,.34), transparent 70%), radial-gradient(38% 12% at 82% 44%, rgba(255,126,168,.22), transparent 70%); transform: rotate(-7deg); animation: auroraDrift 26s ease-in-out infinite alternate; will-change: transform, opacity; } @keyframes auroraDrift { 0% { transform: rotate(-7deg) translateX(-3%) scaleY(1); opacity: .38; } 50% { transform: rotate(-5deg) translateX(2%) scaleY(1.18); opacity: .58; } 100% { transform: rotate(-8deg) translateX(4%) scaleY(.94); opacity: .42; } } /* ---------- JS-spawned shooting stars ---------- */ .shooting.js { animation: shootOnce 1.4s ease-in forwards; } @keyframes shootOnce { 0% { opacity: 0; transform: rotate(-24deg) translateX(0); } 8% { opacity: .95; } 100% { opacity: 0; transform: rotate(-24deg) translateX(-430px); } } /* ---------- Scroll progress (paint stroke) ---------- */ #progress { position: fixed; top: 0; left: 0; width: 100%; height: 4px; z-index: 120; pointer-events: none; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--coral), var(--gold) 45%, var(--teal) 80%, var(--lav)); border-radius: 0 3px 3px 0; opacity: .9; } /* ---------- Paint-splat button clicks ---------- */ .splat { position: fixed; z-index: 260; width: 0; height: 0; pointer-events: none; } .splat i { position: absolute; left: 0; top: 0; border-radius: 50%; background: var(--coral); will-change: transform, opacity; animation: splatFly .62s cubic-bezier(.1,.75,.3,1) forwards; } .splat i.c2 { background: var(--teal); } .splat i.c3 { background: var(--gold); } .splat i.c4 { background: var(--lav); } .splat i.c5 { background: var(--rose); } @keyframes splatFly { 0% { transform: translate(0,0) scale(1); opacity: .95; } 100% { transform: translate(var(--tx,0px), var(--ty,-30px)) scale(.15); opacity: 0; } } /* ---------- Self-drawing painted underlines ---------- */ .foot a, .form-note a, .faq .a a { text-decoration: none; padding-bottom: 2px; background-image: linear-gradient(90deg, var(--coral), var(--gold)); background-repeat: no-repeat; background-size: 0% 2px; background-position: 0 calc(100% - 0px); transition: background-size .35s cubic-bezier(.3,.9,.4,1), color .25s; } .foot a:hover, .form-note a:hover, .faq .a a:hover { background-size: 100% 2px; } /* ---------- Moon: secret wish (easter egg) ---------- */ .scene .moon { pointer-events: auto; cursor: pointer; } .moon.wish svg { animation: moonWish 1.2s cubic-bezier(.3,1.5,.5,1); } .moon.wish { filter: drop-shadow(0 0 42px rgba(255,209,102,.95)); transition: filter .4s; } @keyframes moonWish { 0%,100% { transform: scale(1); } 35% { transform: scale(1.14) rotate(-4deg); } } /* ---------- Case studies: gallery frames ---------- */ .frames { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; padding-bottom: 18px; } @media (max-width: 900px) { .frames { grid-template-columns: 1fr; } } .frame { position: relative; border-radius: 10px; padding: 11px; background: linear-gradient(160deg, #ffe2a8, #d8a83c 48%, #a5762a 82%, #c9963a); box-shadow: 0 8px 0 rgba(0,0,0,.3), 0 26px 70px rgba(0,0,0,.45); transition: transform .35s cubic-bezier(.3,1.5,.5,1), box-shadow .3s; } .frame:nth-child(1) { transform: rotate(-.7deg); } .frame:nth-child(2) { transform: rotate(.4deg) translateY(6px); } .frame:nth-child(3) { transform: rotate(.8deg); } .frame:hover { transform: translateY(-7px) rotate(0deg); box-shadow: 0 13px 0 rgba(0,0,0,.26), 0 34px 90px rgba(0,0,0,.5); } .frame::before { /* hanging nail */ content: ""; position: absolute; top: -15px; left: 50%; margin-left: -6px; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f0e6d0, #8d81ad 70%, #4a3f66); box-shadow: 0 2px 4px rgba(0,0,0,.5); } .frame-in { border-radius: 5px; background: var(--night-3); border: 1.5px solid rgba(0,0,0,.4); box-shadow: inset 0 2px 14px rgba(0,0,0,.45); padding: 26px 24px 24px; height: 100%; display: flex; flex-direction: column; } .frame-in .sector { display: inline-flex; align-self: flex-start; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); border: 1.5px solid rgba(94,230,200,.45); border-radius: 999px; padding: 4px 12px; background: rgba(94,230,200,.08); font-family: var(--sans); } .frame-in h3 { margin-top: 16px; font-size: 21px; line-height: 1.25; } .frame-in p { margin-top: 10px; color: var(--cream-dim); font-size: 14.6px; flex: 1; } .frame-in .result { margin-top: 18px; padding-top: 16px; border-top: 1.5px dashed var(--line); font-family: var(--serif); font-style: italic; font-size: 15.5px; color: var(--gold); } .frame-in .result b { color: var(--gold); font-weight: 700; font-style: normal; } /* ---------- 404 page ---------- */ .errwrap { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 60px 22px; position: relative; z-index: 1; } .errwrap .code { font-family: var(--serif); font-weight: 700; line-height: .95; font-size: clamp(96px, 20vw, 190px); color: var(--gold); text-shadow: 0 0 60px rgba(255,209,102,.25); } .errwrap h1 { margin-top: 14px; font-size: clamp(24px, 4vw, 38px); } .errwrap p { margin: 14px auto 0; max-width: 440px; color: var(--cream-dim); } .errwrap .cta-row { display: flex; gap: 14px; justify-content: center; margin-top: 32px; flex-wrap: wrap; } .err-balloon { width: 84px; margin: 0 auto 26px; animation: bob 8s ease-in-out infinite; } .err-balloon svg { width: 100%; height: auto; } /* ---------- Reduced motion for all additions ---------- */ @media (prefers-reduced-motion: reduce) { .intro { display: none; } .sky::before { animation: none; opacity: .3; } .shooting.js, .splat { display: none; } .err-balloon { animation: none; } } /* ---------- Narrow-phone nav fit ---------- */ @media (max-width: 430px) { nav { gap: 12px; } .logo { font-size: 18px; gap: 8px; } .logo svg { width: 28px; height: 28px; } .nav-cta { gap: 8px; } .nav-cta .btn-primary { padding: 9px 13px; font-size: 13px; } .burger, .lamp { width: 38px; height: 38px; } } /* ---------- Legal / privacy page ---------- */ .legal { width: min(720px, calc(100% - 44px)); margin: 0 auto; padding: 90px 0 110px; position: relative; z-index: 1; } .legal-logo { margin-bottom: 46px; } .legal h1 { font-size: clamp(38px, 6vw, 58px); line-height: 1.06; } .legal-updated { margin-top: 10px; font-size: 13.5px; color: var(--faint); font-style: italic; font-family: var(--serif); } .legal h2 { margin-top: 44px; font-size: 23px; } .legal p { margin-top: 14px; color: var(--cream-dim); font-size: 15.5px; } .legal p a { color: var(--cream); text-decoration: none; padding-bottom: 2px; background-image: linear-gradient(90deg, var(--coral), var(--gold)); background-repeat: no-repeat; background-size: 100% 2px; background-position: 0 100%; } .legal-back { margin-top: 54px; } /* ================================================================ Higgsfield design pass — painted sky textures & gallery canvases ================================================================ */ /* ---------- Painted sky texture overlays ---------- */ .skytex, .skytex-day { position: fixed; inset: 0; z-index: -3; pointer-events: none; background-position: center; background-size: cover; transition: opacity 1.4s ease; } .skytex { background-image: url("/img/sky-night.webp"); opacity: .26; mix-blend-mode: screen; } .skytex-day { opacity: 0; mix-blend-mode: soft-light; } /* dawn texture only fetched when dawn mode is first activated */ body.dawn .skytex-day { background-image: url("/img/sky-dawn.webp"); opacity: .38; } body.dawn .skytex { opacity: 0; } /* ---------- Painted canvases inside the gallery frames ---------- */ .frame-in .canvas { margin: -26px -24px 20px; overflow: hidden; border-radius: 4px 4px 0 0; border-bottom: 1.5px solid rgba(0,0,0,.4); line-height: 0; background: var(--ink); } .frame-in .canvas img { display: block; width: 100%; height: auto; transform: scale(1.03); transform-origin: 50% 40%; transition: transform 4s cubic-bezier(.2,.6,.3,1), filter .6s ease; filter: saturate(.96); } .frame:hover .canvas img { transform: scale(1.1); filter: saturate(1.08); } /* gallery-light sheen sweeping the canvas on hover */ .frame-in .canvas { position: relative; } .frame-in .canvas::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(247,239,226,.14) 46%, transparent 62%); transform: translateX(-130%); transition: transform 1.1s ease; pointer-events: none; } .frame:hover .canvas::after { transform: translateX(130%); } @media (prefers-reduced-motion: reduce) { .frame-in .canvas img { transform: none; transition: none; } .frame:hover .canvas img { transform: none; } .frame-in .canvas::after { display: none; } } /* ================================================================ Shared hill keyframes (cottage glow flicker, firefly float) ================================================================ */ @keyframes winFlick { 0%, 100% { opacity: .7; } 42% { opacity: 1; } 74% { opacity: .82; } } @keyframes ffFloat { 0%, 100% { opacity: .1; transform: translate(0, 0); } 22% { opacity: .9; } 50% { opacity: .25; transform: translate(7px, -11px); } 76% { opacity: .85; transform: translate(-5px, -5px); } } /* ================================================================ Full painted pass — panorama hills, painted sprites, brush intro ================================================================ */ /* ---------- Painted hills panorama ---------- */ .hillspaint { position: relative; width: 100%; aspect-ratio: 1920 / 823; background-image: url("/img/hills-night.webp"); background-size: 100% 100%; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 24%); mask-image: linear-gradient(180deg, transparent 0, #000 24%); transition: filter 1.4s ease; } body.dawn .hillspaint { filter: sepia(.25) hue-rotate(-22deg) saturate(1.3) brightness(1.24); } .cotglow { position: absolute; left: 24.2%; top: 82.5%; width: 3.5%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255,209,102,.5), transparent 68%); mix-blend-mode: screen; animation: winFlick 3.4s ease-in-out infinite; } .hff { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); filter: drop-shadow(0 0 4px rgba(255,209,102,.9)); animation: ffFloat 7s ease-in-out infinite; } .hff.f1 { left: 16%; top: 55%; } .hff.f2 { left: 38%; top: 62%; animation-delay: 1.7s; animation-duration: 8s; } .hff.f3 { left: 63%; top: 57%; animation-delay: 3.4s; } .hff.f4 { left: 82%; top: 64%; animation-delay: 5.1s; animation-duration: 9s; } body.dawn .hff { visibility: hidden; } /* mascot re-seated on the painted hills */ .mascot { bottom: 13%; right: 7.5%; } /* ---------- Painted sprites ---------- */ .sprite { display: block; width: 100%; height: auto; filter: drop-shadow(0 12px 26px rgba(0, 0, 0, .38)); } .isle-l .sprite, .isle-r .sprite { filter: drop-shadow(0 16px 30px rgba(0, 0, 0, .45)); } body.dawn .sprite { filter: drop-shadow(0 12px 26px rgba(0, 0, 0, .3)) sepia(.15) saturate(1.15) brightness(1.1); } @media (prefers-reduced-motion: reduce) { .cotglow, .hff { animation: none; } .hff { opacity: .5; } } /* ================================================================ Owl mascot + painted service vignettes ================================================================ */ .mascot .owl { animation: bob 7s ease-in-out infinite; } .mascot:hover .owl { animation: bob 2.5s ease-in-out infinite; } .peeker img { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .35)); } .vignette { aspect-ratio: 260 / 120; } .vignette img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 3.5s cubic-bezier(.2,.6,.3,1); } .card:hover .vignette img { transform: scale(1.09); } @media (prefers-reduced-motion: reduce) { .mascot .owl { animation: none; } .vignette img, .card:hover .vignette img { transform: none; transition: none; } } /* ---------- Intro: owl flies across, painting the page in ---------- */ .intro .flyowl { position: absolute; top: 34vh; left: 0; width: clamp(100px, 13vw, 170px); aspect-ratio: 220 / 199; z-index: 3; pointer-events: none; transform: translateX(-25vw); animation: owlFly 1.15s cubic-bezier(.35,.1,.5,.9) .06s forwards; } .intro .flyowl i { position: absolute; inset: 0; background-size: contain; background-position: center; background-repeat: no-repeat; } .intro .flyowl .fu { background-image: url("data:image/webp;base64,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"); animation: flapA .22s steps(1, end) infinite; } .intro .flyowl .fd { background-image: url("data:image/webp;base64,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"); opacity: 0; animation: flapB .22s steps(1, end) infinite; } @keyframes flapA { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } @keyframes flapB { 0%, 49% { opacity: 0; } 50%, 100% { opacity: 1; } } @keyframes owlFly { 0% { transform: translate(-25vw, 0); } 30% { transform: translate(18vw, -5vh); } 60% { transform: translate(62vw, 2vh); } 100% { transform: translate(130vw, -4vh); } } /* ---------- Painted journey balloon ---------- */ #wander img { display: block; width: 100%; height: auto; animation: wanderSway 7s ease-in-out infinite; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .35)); } /* ---------- Painted scroll progress (brush streak) ---------- */ #progress { height: 9px; transform: none; width: 0; -webkit-mask-image: url("/img/brush-stroke.webp"); mask-image: url("/img/brush-stroke.webp"); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; border-radius: 0; opacity: .95; } /* ================================================================ Intro v3 — the owl paints the site in behind him (overrides earlier .intro curtain rules; later rules win) ================================================================ */ .intro::after { display: none; } .intro::before { content: ""; position: absolute; inset: 0; height: 100%; z-index: 1; background: radial-gradient(ellipse 120% 90% at 50% 40%, rgba(53,42,88,.55), transparent 70%), linear-gradient(180deg, #2a2046, #241a3a 55%, #1e1533); border-radius: 0; -webkit-mask-image: url("/img/reveal-mask.webp"); mask-image: url("/img/reveal-mask.webp"); -webkit-mask-size: 200% 100%; mask-size: 200% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 100% 0; mask-position: 100% 0; animation: paintReveal 1.15s cubic-bezier(.35,.1,.5,.9) .06s forwards, introWipe .3s ease 1.5s forwards; /* safety slide for no-mask browsers */ } @keyframes paintReveal { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0% 0; mask-position: 0% 0; } } /* owl path retuned to ride the paint edge */ @keyframes owlFly { 0% { transform: translate(-14vw, 0); } 30% { transform: translate(30vw, -5vh); } 60% { transform: translate(62vw, 2vh); } 100% { transform: translate(108vw, -4vh); } } /* ================================================================ Intro v4 — compositor-only reveal (transform, not mask-position) ================================================================ */ .intro { overflow: hidden; } .intro .canvaswipe { display: none; } @supports ((mask-image: url("")) or (-webkit-mask-image: url(""))) { /* masked browsers: kill the repainting overlay, use the sliding canvas */ .intro::before { display: none; animation: none; } .intro .canvaswipe { display: block; position: absolute; top: 0; left: 0; width: 200vw; height: 100%; z-index: 2; pointer-events: none; background: radial-gradient(ellipse 60% 90% at 75% 40%, rgba(53,42,88,.55), transparent 70%), linear-gradient(180deg, #2a2046, #241a3a 55%, #1e1533); -webkit-mask-image: url("/img/reveal-mask.webp"); mask-image: url("/img/reveal-mask.webp"); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; transform: translateX(-100vw); will-change: transform; animation: canvasSlide 1.15s cubic-bezier(.35,.1,.5,.9) .06s forwards; } } @keyframes canvasSlide { to { transform: translateX(10vw); } } .intro .flyowl { will-change: transform; } .intro .flyowl .fu { animation-duration: .17s; } .intro .flyowl .fd { animation-duration: .17s; } /* ============ Painted moon ============ */ .moon img { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 30px rgba(255,209,102,.38)); } .moon.wish img { animation: moonWish 1.2s cubic-bezier(.3,1.5,.5,1); } /* ============ More clouds ============ */ .cloud.c2 { opacity: .72; } .cloud.c3 { opacity: .58; } .cloud.c4 { top: 45%; right: -170px; width: 330px; animation: cloudDrift 130s linear infinite reverse; opacity: .55; } .cloud.c5 { top: 76%; left: -240px; width: 430px; animation: cloudDrift 150s linear infinite; opacity: .4; } /* ============ Tech constellations v3 — 6 groups, 23 stars ============ */ .skychart-wrap { padding: 64px 0 26px; } .skychart-wrap > p { text-align: center; font-size: 12.5px; color: var(--faint); letter-spacing: .18em; text-transform: uppercase; margin-bottom: 26px; } .skychart { position: relative; width: min(1280px, calc(100% - 40px)); margin: 0 auto; height: clamp(400px, 34vw, 540px); } .constgroup { position: absolute; inset: 0; pointer-events: none; --cg: var(--lav); } .g1 { --cg: var(--gold); } .g2 { --cg: var(--rose); } .g3 { --cg: var(--teal); } .g4 { --cg: var(--coral); } .g5 { --cg: var(--lav); } .g6 { --cg: var(--mint); } .g7 { --cg: var(--rose); } .constgroup::before { content: ""; position: absolute; transform: translate(-50%, -50%); width: clamp(220px, 26vw, 400px); aspect-ratio: 1.35; border-radius: 50%; background: radial-gradient(closest-side, var(--cg), transparent); opacity: .09; filter: blur(34px); transition: opacity .6s ease; } .g1::before { left: 13%; top: 32%; } .g2::before { left: 41%; top: 26%; } .g3::before { left: 56%; top: 66%; } .g4::before { left: 65%; top: 28%; } .g5::before { left: 87%; top: 36%; } .g6::before { left: 33%; top: 72%; } .g7::before { left: 78%; top: 78%; } body.dawn .constgroup::before { opacity: .12; filter: blur(40px) saturate(.8); } .skylines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .skylines path { fill: none; stroke: rgba(247,239,226,.16); stroke-width: 1.3; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; transition: stroke .45s ease; } body.dawn .skylines path { stroke: rgba(58,36,88,.4); } .skystars { list-style: none; margin: 0; padding: 0; } .skystar { --chip: var(--lav); pointer-events: auto; position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 650; color: var(--cream); white-space: nowrap; background: rgba(22,16,42,.55); border: 1px solid rgba(247,239,226,.13); border-radius: 999px; padding: 8px 16px 8px 12px; transition: transform .3s cubic-bezier(.3,1.6,.5,1), border-color .3s, background .3s, box-shadow .3s; } .skystar::before { content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--chip); box-shadow: 0 0 8px var(--chip), 0 0 18px var(--chip); animation: starTw 3.2s ease-in-out infinite; } .skystar:nth-child(2n)::before { animation-delay: 1.1s; } .skystar:nth-child(3n)::before { animation-delay: 2.2s; } @keyframes starTw { 0%, 100% { opacity: .7; } 50% { opacity: 1; } } .skystar .tlogo { width: 18px; height: 18px; flex: none; } .skystar .tlogo-wide { width: 30px; } /* mid-width: shrink pills so the chart keeps its breathing room */ @media (min-width: 901px) and (max-width: 1240px) { .skystar { font-size: 11.5px; gap: 6px; padding: 5px 11px 5px 8px; } .skystar::before { width: 6px; height: 6px; } .skystar .tlogo { width: 14px; height: 14px; } .skystar .tlogo-wide { width: 23px; } } .t-coral { --chip: var(--coral); } .t-gold { --chip: var(--gold); } .t-teal { --chip: var(--teal); } .t-lav { --chip: var(--lav); } .t-rose { --chip: var(--rose); } .t-mint { --chip: var(--mint); } .constname { position: absolute; transform: translate(-50%, -50%); pointer-events: none; font-family: var(--serif); font-style: italic; font-size: 13.5px; color: rgba(247,239,226,.36); letter-spacing: .07em; transition: color .45s ease; } body.dawn .constname { color: rgba(42,28,70,.5); } .constgroup:hover::before { opacity: .17; } .constgroup:hover .skylines path { stroke: color-mix(in srgb, var(--cg) 60%, rgba(247,239,226,.1)); } .constgroup:hover .constname { color: rgba(247,239,226,.62); } .constgroup:hover .skystar { border-color: rgba(247,239,226,.24); } .skystar:hover { transform: translate(-50%, -50%) scale(1.08); background: rgba(30,21,56,.82); border-color: color-mix(in srgb, var(--chip) 60%, transparent); box-shadow: 0 8px 26px color-mix(in srgb, var(--chip) 22%, transparent); } /* star positions (percent; line grid y = top% x .6) */ .s1 { left: 10%; top: 14%; } .s2 { left: 6%; top: 36%; } .s3 { left: 22%; top: 26%; } .s4 { left: 15%; top: 48%; } .s5 { left: 37%; top: 10%; } .s6 { left: 45%; top: 22%; } .s19 { left: 37%; top: 34%; } .s20 { left: 46%; top: 44%; } .s7 { left: 55%; top: 54%; } .s8 { left: 63%; top: 64%; } .s17 { left: 49%; top: 69%; } .s18 { left: 57%; top: 80%; } .s9 { left: 58%; top: 12%; } .s10 { left: 68%; top: 22%; } .s11 { left: 65%; top: 41%; } .s12 { left: 74%; top: 52%; } .s13 { left: 84%; top: 12%; } .s14 { left: 93%; top: 26%; } .s15 { left: 83%; top: 36%; } .s23 { left: 90%; top: 50%; } .s16 { left: 84%; top: 62%; } .s21 { left: 28%; top: 66%; } .s22 { left: 38%; top: 78%; } .s24 { left: 77%; top: 77%; } .s25 { left: 85%; top: 87%; } .s26 { left: 56%; top: 29%; } .n1 { left: 12%; top: 62%; } .n2 { left: 40%; top: 56%; } .n3 { left: 54%; top: 92%; } .n4 { left: 66%; top: 58%; } .n5 { left: 88%; top: 70%; } .n6 { left: 33%; top: 90%; } .n7 { left: 77%; top: 94%; } /* draw-in choreography */ @media (prefers-reduced-motion: no-preference) { .skychart-wrap:not(.in) .skylines path { stroke-dashoffset: 100; } .skychart-wrap:not(.in) .skystar { opacity: 0; } .skychart-wrap:not(.in) .constname { opacity: 0; } .skychart-wrap:not(.in) .constgroup::before { opacity: 0; } .skychart-wrap.in .skylines path { animation: skyDraw 1.2s ease both; } .skychart-wrap.in .g1 .skylines path { animation-delay: .30s; } .skychart-wrap.in .g2 .skylines path { animation-delay: .55s; } .skychart-wrap.in .g3 .skylines path { animation-delay: .75s; } .skychart-wrap.in .g4 .skylines path { animation-delay: .95s; } .skychart-wrap.in .g5 .skylines path { animation-delay: 1.20s; } .skychart-wrap.in .g6 .skylines path { animation-delay: 1.40s; } .skychart-wrap.in .g7 .skylines path { animation-delay: 1.55s; } .skychart-wrap.in .skystar { animation: starPop .5s cubic-bezier(.3,1.6,.5,1) backwards; } .skychart-wrap.in .s1 { animation-delay: .35s; } .skychart-wrap.in .s2 { animation-delay: .50s; } .skychart-wrap.in .s3 { animation-delay: .65s; } .skychart-wrap.in .s4 { animation-delay: .80s; } .skychart-wrap.in .s5 { animation-delay: .60s; } .skychart-wrap.in .s6 { animation-delay: .75s; } .skychart-wrap.in .s19 { animation-delay: .90s; } .skychart-wrap.in .s20 { animation-delay: 1.05s; } .skychart-wrap.in .s7 { animation-delay: .80s; } .skychart-wrap.in .s8 { animation-delay: .95s; } .skychart-wrap.in .s17 { animation-delay: 1.10s; } .skychart-wrap.in .s18 { animation-delay: 1.25s; } .skychart-wrap.in .s9 { animation-delay: 1.00s; } .skychart-wrap.in .s10 { animation-delay: 1.15s; } .skychart-wrap.in .s11 { animation-delay: 1.30s; } .skychart-wrap.in .s12 { animation-delay: 1.45s; } .skychart-wrap.in .s13 { animation-delay: 1.25s; } .skychart-wrap.in .s14 { animation-delay: 1.40s; } .skychart-wrap.in .s15 { animation-delay: 1.55s; } .skychart-wrap.in .s23 { animation-delay: 1.70s; } .skychart-wrap.in .s16 { animation-delay: 1.85s; } .skychart-wrap.in .s21 { animation-delay: 1.50s; } .skychart-wrap.in .s22 { animation-delay: 1.65s; } .skychart-wrap.in .s24 { animation-delay: 1.80s; } .skychart-wrap.in .s25 { animation-delay: 1.95s; } .skychart-wrap.in .s26 { animation-delay: 1.60s; } .skychart-wrap.in .constname { animation: nameFade .9s ease 2.25s backwards; } .skychart-wrap.in .constgroup::before { animation: nameFade 1.4s ease .9s backwards; } } @keyframes skyDraw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } } @keyframes starPop { from { opacity: 0; transform: translate(-50%, -50%) scale(.5); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } @keyframes nameFade { from { opacity: 0; } to { opacity: 1; } } @media (max-width: 900px) { .skychart { height: auto; } .skylines, .constname { display: none; } .constgroup { position: static; pointer-events: auto; } .constgroup::before { display: none; } .skystars { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .constgroup + .constgroup .skystars { margin-top: 10px; } .skychart-wrap:not(.in) .skystar, .skychart-wrap.in .skystar, .skystar { position: static; transform: none; opacity: 1; animation: none; } .skystar:hover { transform: scale(1.05); } } @media (prefers-reduced-motion: reduce) { .skystar::before { animation: none; } } /* ============ Contact split: next-steps column + framed form ============ */ .contact-split { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(36px, 5vw, 64px); max-width: 1060px; margin: 52px auto 0; text-align: left; align-items: start; } .cs-title { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--cream); } .cs-steps { counter-reset: csn; list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 24px; } .cs-steps li { counter-increment: csn; position: relative; padding-left: 52px; color: var(--cream-dim); font-size: 14.8px; } .cs-steps li::before { content: counter(csn, decimal-leading-zero); position: absolute; left: 0; top: 2px; font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 15px; color: rgba(255,209,102,.55); } .cs-steps li:not(:last-child)::after { content: ""; position: absolute; left: 10px; top: 32px; bottom: -20px; width: 1px; background: linear-gradient(180deg, rgba(255,209,102,.32), transparent); } .cs-steps b { display: block; color: var(--cream); font-size: 15.5px; font-weight: 650; margin-bottom: 3px; } .cs-direct { margin-top: 32px; padding-top: 24px; border-top: 1px solid; border-image: linear-gradient(90deg, rgba(255,209,102,.32), transparent) 1; font-size: 13.5px; color: var(--faint); } .cs-direct a { display: block; font-family: var(--serif); font-size: 21px; color: var(--gold); margin: 5px 0 7px; text-decoration: none; text-shadow: 0 0 18px rgba(255,209,102,.25); transition: text-shadow .3s; } .cs-direct a:hover { text-shadow: 0 0 26px rgba(255,209,102,.55); text-decoration: underline; text-underline-offset: 4px; } .contact-split .contact-form { margin: 0; max-width: none; background: rgba(22,16,42,.5); border: 1px solid rgba(247,239,226,.1); border-radius: 22px; padding: clamp(24px, 3vw, 36px); box-shadow: 0 20px 60px rgba(0,0,0,.3); } @media (max-width: 900px) { .contact-split { grid-template-columns: 1fr; gap: 42px; max-width: 640px; } } /* ============ Creative footer: the harbor at the edge of the night ============ */ .foot { align-items: center; } .foot-id { min-width: 220px; } .foot-fine { margin-top: 8px; font-size: 13px; color: var(--faint); } .harbor { position: relative; width: min(1140px, calc(100% - 4px)); margin: 6px auto -6px; line-height: 0; } .harbor svg { width: 100%; height: auto; overflow: visible; } .hb-beam { transform-box: fill-box; transform-origin: 100% 45%; animation: hbSweep 9s ease-in-out infinite; } @keyframes hbSweep { 0%,100% { transform: rotate(9deg); opacity: .55; } 50% { transform: rotate(-11deg); opacity: 1; } } .hb-lamp { animation: hbLamp 4.5s ease-in-out infinite; } @keyframes hbLamp { 0%,100% { opacity: .75; } 50% { opacity: 1; } } .hb-boat { animation: hbBob 7s ease-in-out infinite; } @keyframes hbBob { 0%,100% { transform: translateY(0) rotate(-1.4deg); } 50% { transform: translateY(-7px) rotate(1.6deg); } } .hb-sea1 { animation: hbDriftA 14s ease-in-out infinite alternate; } .hb-sea2 { animation: hbDriftB 11s ease-in-out infinite alternate; } @keyframes hbDriftA { from { transform: translateX(0); } to { transform: translateX(-26px); } } @keyframes hbDriftB { from { transform: translateX(-20px); } to { transform: translateX(8px); } } .hb-glint { stroke-dasharray: 7 11; animation: hbGlint 5s linear infinite; } @keyframes hbGlint { to { stroke-dashoffset: -54; } } /* signal-flag bunting nav */ .bunting { position: relative; width: min(880px, 100%); margin: 26px auto 0; padding-top: 16px; } .bunting .rope { position: absolute; inset: 0 0 auto 0; height: 74px; width: 100%; pointer-events: none; } .bunting-row { display: flex; justify-content: center; align-items: flex-start; gap: clamp(8px, 2.4vw, 26px); flex-wrap: wrap; } .pennant { position: relative; display: inline-flex; justify-content: center; padding: 13px 16px 26px; min-width: 86px; font-family: var(--sans); font-weight: 650; font-size: 14.5px; letter-spacing: .02em; color: var(--cream); text-decoration: none; background-image: linear-gradient(180deg, #3a2c58, var(--night-3)); clip-path: polygon(0 0, 100% 0, 100% 64%, 50% 100%, 0 64%); border-top: 3px solid var(--pn, var(--teal)); transition: transform .3s cubic-bezier(.3,1.6,.5,1), filter .3s, color .3s; transform-origin: top center; } .pennant::after { content: ""; position: absolute; left: 10px; right: 10px; top: 6px; border-top: 2px dashed rgba(247,239,226,.18); } .pennant:nth-child(6n+1) { --pn: var(--coral); } .pennant:nth-child(6n+2) { --pn: var(--teal); } .pennant:nth-child(6n+3) { --pn: var(--lav); } .pennant:nth-child(6n+4) { --pn: var(--rose); } .pennant:nth-child(6n+5) { --pn: var(--mint); } /* hang with a sag: outer flags high, centre low, alternating tilt */ .pennant:nth-child(1) { transform: rotate(-4deg) translateY(2px); } .pennant:nth-child(2) { transform: rotate(2.5deg) translateY(13px); } .pennant:nth-child(3) { transform: rotate(-2deg) translateY(20px); } .pennant:nth-child(4) { transform: rotate(2deg) translateY(20px); } .pennant:nth-child(5) { transform: rotate(-2.5deg) translateY(13px); } .pennant:nth-child(6) { transform: rotate(4deg) translateY(2px); } .pennant:hover, .pennant:focus-visible { transform: rotate(0deg) translateY(6px) scale(1.08); filter: brightness(1.18); color: var(--gold); } .pennant-gold { background-image: linear-gradient(180deg, #ffd97f, #f0b13e); color: #2a1c06; border-top-color: #fff1c9; } .pennant-gold::after { border-top-color: rgba(42,28,6,.25); } .pennant-gold:hover, .pennant-gold:focus-visible { color: #2a1c06; filter: brightness(1.06) saturate(1.1); } /* sky-lantern back-to-top */ .skylift { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--faint); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; min-width: 130px; } .skylift svg { width: 46px; height: auto; overflow: visible; transition: transform .5s cubic-bezier(.3,1.4,.5,1); } .skylift .sl-body { animation: hbLantern 6s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; } @keyframes hbLantern { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-9px) rotate(2deg); } } .skylift:hover { color: var(--cream); } .skylift:hover svg { transform: translateY(-12px); } .foot .skylift { background-image: none; } .foot .skylift:hover { background-size: 0 0; } @media (max-width: 900px) { .foot { flex-direction: column; align-items: center; text-align: center; gap: 40px; } } @media (max-width: 760px) { .bunting { padding-top: 6px; } .pennant { min-width: 72px; padding: 11px 12px 22px; font-size: 13.5px; } .pennant:nth-child(n) { transform: rotate(0) translateY(0); } } @media (prefers-reduced-motion: reduce) { .hb-beam, .hb-lamp, .hb-boat, .hb-sea1, .hb-sea2, .hb-glint, .skylift .sl-body { animation: none; } .pennant, .skylift svg { transition: none; } } /* ============ Contact form: live validation + receipt scene ============ */ .field .err.js-err { display: none; } .field .err.js-err.show { display: block; } .field.invalid input, .field.invalid textarea { border-bottom-color: transparent; background-image: linear-gradient(90deg, #ff8f6b, #ff7ea8); background-size: 100% 2px; } .field.invalid label { color: #ff9d9d; } .field.valid input, .field.valid textarea { border-bottom-color: color-mix(in srgb, var(--mint) 45%, rgba(247,239,226,.22)); } .field.valid label::after { content: " ✓"; color: var(--mint); letter-spacing: 0; } .contact-form.sending button[type="submit"] { opacity: .75; animation: sendPulse 1.1s ease-in-out infinite; } @keyframes sendPulse { 50% { opacity: .5; } } .contact-form.sending-out > * { opacity: 0; transition: opacity .35s ease; } .contact-form.sent { display: block; overflow: hidden; } .sent-scene { position: relative; text-align: center; padding: 26px 10px 104px; outline: none; animation: sceneIn .5s ease; } .seal { position: relative; display: inline-grid; place-items: center; width: 86px; height: 86px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #ffe9a8, var(--gold) 58%, #d9a83f); box-shadow: 0 6px 0 rgba(0,0,0,.25), 0 0 44px rgba(255,209,102,.4), inset 0 0 0 3px rgba(42,28,6,.18); animation: sealStamp .55s cubic-bezier(.2,1.4,.4,1) both; } .seal::after { content: ""; position: absolute; inset: -12px; border-radius: 50%; border: 2px solid rgba(255,209,102,.55); animation: ringOut 1.1s ease .5s both; } .seal svg { width: 44px; height: 44px; } .seal path { fill: none; stroke: #2a1c06; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; animation: tickDraw .45s ease .4s forwards; } .sent-title { font-family: var(--serif); font-size: 30px; font-weight: 700; color: var(--cream); margin-top: 22px; animation: riseIn .5s ease .25s backwards; } .sent-sub { color: var(--cream-dim); margin-top: 8px; animation: riseIn .5s ease .4s backwards; } .sent-owl { position: absolute; bottom: -3px; right: 20px; width: 132px; height: auto; animation: owlPeekUp .7s cubic-bezier(.3,1.4,.5,1) .8s backwards; } @keyframes sealStamp { 0% { transform: scale(2.4) rotate(-14deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1) rotate(-4deg); } } @keyframes ringOut { from { transform: scale(.55); opacity: 1; } to { transform: scale(1.5); opacity: 0; } } @keyframes tickDraw { to { stroke-dashoffset: 0; } } @keyframes riseIn { from { opacity: 0; transform: translateY(12px); } } @keyframes sceneIn { from { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .sent-scene, .seal, .seal::after, .seal path, .sent-title, .sent-sub, .sent-owl, .contact-form.sending button[type="submit"] { animation: none; } .seal path { stroke-dashoffset: 0; } }