/* Dan Davis Golf - light motion layer (progressive enhancement). Content is visible by default. Reveals only apply once enhance.js confirms support and adds .motion to . Hovers are plain CSS and always safe. */ :root { --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* gentle arrival, no overshoot */ --gold: 240, 208, 96; /* brand accent (rgb channels) */ } /* ---- Scroll reveals (opacity-only: never touches the elements' own transforms) ---- */ @media (prefers-reduced-motion: no-preference) { html.motion [data-reveal] { opacity: 0; transition: opacity 0.6s var(--ease-out); } html.motion [data-reveal].in-view { opacity: 1; } } /* ---- Hover / press micro-interactions (Jakub: subtle, production-polish) ---- These are plain CSS, always on. They animate transform / filter / shadow only, so they never affect layout. Each surface gets a distinct, restrained treatment. */ /* Framer wraps these buttons/icons in tight containers with overflow:hidden, which clip the hover lift / scale / shadow. Let them spill (transforms don't affect layout, so this can't introduce scroll). */ [data-framer-name="social media"], .framer-1lwgum4, .framer-66ZhD { overflow: visible !important; } /* Buttons: confident lift with soft elevation + a touch brighter; tactile press down. Buttons carry no base transform, so transform here is safe. */ a.framer-WG5IT { transition: transform 0.24s var(--ease-out), filter 0.24s ease, box-shadow 0.24s ease; } a.framer-WG5IT:hover { transform: translateY(-2px) scale(1.015); filter: brightness(1.05); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.55); } a.framer-WG5IT:active { transform: translateY(0) scale(0.97); filter: brightness(0.98); box-shadow: 0 4px 12px -8px rgba(0, 0, 0, 0.5); transition-duration: 0.1s; } /* Social circle icons: scale up with a gold-tinted fill + ring and a small lift. */ a[data-framer-name="Instagram"], a[data-framer-name="FB"], a[data-framer-name="YT"] { transition: transform 0.28s var(--ease-out), background-color 0.28s ease, box-shadow 0.28s ease; } a[data-framer-name="Instagram"]:hover, a[data-framer-name="FB"]:hover, a[data-framer-name="YT"]:hover { transform: scale(1.12) translateY(-1px); background-color: rgba(var(--gold), 0.14) !important; box-shadow: 0 0 0 1px rgba(var(--gold), 0.5), 0 6px 16px -8px rgba(0, 0, 0, 0.5); } a[data-framer-name="Instagram"]:active, a[data-framer-name="FB"]:active, a[data-framer-name="YT"]:active { transform: scale(1.04); transition-duration: 0.1s; } /* Brand logo (D monogram, header + footer): a gentle, confident scale + brighten. */ a[data-framer-name="logo"] { transition: transform 0.3s var(--ease-out), filter 0.3s ease; transform-origin: center; } a[data-framer-name="logo"]:hover { transform: scale(1.07); filter: brightness(1.08); } /* Photos: a subtle wake-up - barely-there zoom + a lift in brightness/saturation. Kept tiny because the image frames don't clip overflow. */ img { transition: transform 0.4s var(--ease-out), filter 0.4s ease; } img:hover { transform: scale(1.02); filter: brightness(1.05) saturate(1.04); } /* Text links (nav, footer wordmark): soft dim. Excludes the surfaces handled above. */ a:not(.framer-WG5IT):not([data-framer-name="Instagram"]):not([data-framer-name="FB"]):not([data-framer-name="YT"]):not([data-framer-name="logo"]) { transition: opacity 0.2s ease; } a:not(.framer-WG5IT):not([data-framer-name="Instagram"]):not([data-framer-name="FB"]):not([data-framer-name="YT"]):not([data-framer-name="logo"]):hover { opacity: 0.68; } /* ---- Header: centre the logo + social group (nav removed) ---- The social wrapper had flex-grow:1, pulling the group left; stop it growing so the header row's justify-content:center can centre logo | divider | social as a group. Scoped to the fixed header container so the footer's social row is untouched. */ .framer-1bl3y4i-container :has(> [data-framer-name="social media"]) { flex-grow: 0 !important; } /* ---- Skillest icon: the red rounded-square app-icon mark (white double stroke) ---- */ .dd-skillest { width: 48px; height: 48px; flex: 0 0 auto; border-radius: 12px; background: #fe2c1b; /* Skillest red */ border: none; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; transition: transform 0.25s var(--ease-out), box-shadow 0.25s ease, filter 0.25s ease; } .dd-skillest svg { width: 26px; height: 26px; } .dd-skillest:hover { transform: scale(1.1) translateY(-1px); filter: brightness(1.06); box-shadow: 0 6px 16px -6px rgba(254, 44, 27, 0.6); } /* ---- Sticky header: drop the dark blurred background strip; let it float clear ---- */ [data-framer-name="Default"], [data-framer-name="Mobile - Closed"] { background-color: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; } /* ---- Smooth in-page scrolling (e.g. "Get in touch" -> #contact) ---- */ html { scroll-behavior: smooth; } /* ---- Contact section (added) ---- */ .dd-contact { background: #000; padding: 96px 24px 120px; display: flex; justify-content: center; border-top: 1px solid rgba(255, 255, 255, 0.07); } .dd-contact-inner { width: 100%; max-width: 600px; text-align: center; } .dd-contact-eyebrow { color: rgb(var(--gold)); font-weight: 600; font-size: 15px; margin: 0 0 14px; } .dd-contact-title { color: #fff; font-size: clamp(30px, 5vw, 52px); line-height: 1.05; font-weight: 700; margin: 0 0 16px; } .dd-contact-text { color: rgba(255, 255, 255, 0.6); font-size: 17px; line-height: 1.5; margin: 0 auto 40px; max-width: 460px; } .dd-form { text-align: left; display: flex; flex-direction: column; gap: 16px; } .dd-form-row { display: flex; gap: 16px; } .dd-form-row .dd-field { flex: 1; } .dd-field { display: flex; flex-direction: column; gap: 8px; } .dd-field span { color: rgba(255, 255, 255, 0.7); font-size: 14px; } .dd-field input, .dd-field textarea { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 12px; padding: 14px 16px; color: #fff; font: inherit; font-size: 16px; transition: border-color 0.2s ease, background 0.2s ease; } .dd-field textarea { resize: vertical; min-height: 120px; } .dd-field input:focus, .dd-field textarea:focus { outline: none; border-color: rgb(var(--gold)); background: rgba(255, 255, 255, 0.06); } .dd-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .dd-submit { margin-top: 8px; align-self: flex-start; background: rgb(var(--gold)); color: #0a0a0a; border: none; border-radius: 99px; padding: 15px 34px; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; transition: transform 0.24s var(--ease-out), filter 0.24s ease, box-shadow 0.24s ease; } .dd-submit:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.55); } .dd-submit:active { transform: translateY(0) scale(0.98); } .dd-submit:disabled { opacity: 0.6; cursor: default; transform: none; box-shadow: none; } .dd-status { margin: 2px 0 0; font-size: 15px; } .dd-status[data-kind="ok"] { color: rgb(var(--gold)); } .dd-status[data-kind="error"] { color: #ff6b6b; } @media (max-width: 640px) { .dd-form-row { flex-direction: column; } .dd-contact { padding: 64px 20px 88px; } } /* ---- Custom footer (replaces the old Framer footer) ---- */ .dd-footer { background: #050505; border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 72px 24px 32px; color: rgba(255, 255, 255, 0.6); } .dd-footer-inner { max-width: 1120px; margin: 0 auto; } .dd-footer-top { display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap; padding-bottom: 48px; } .dd-footer-brand { max-width: 320px; } .dd-footer-logo { width: 40px; height: 40px; display: block; margin-bottom: 16px; color: rgb(var(--gold)); } .dd-footer-name { color: #fff; font-size: 19px; font-weight: 700; margin: 0 0 6px; } .dd-footer-tag { font-size: 15px; line-height: 1.5; margin: 0; } .dd-footer-cols { display: flex; gap: 56px; flex-wrap: wrap; } .dd-footer-h { color: rgba(255, 255, 255, 0.4); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 16px; } .dd-footer-addr { font-style: normal; font-size: 15px; line-height: 1.7; } .dd-footer-col a.dd-footer-link { display: block; color: rgba(255, 255, 255, 0.6); text-decoration: none; font-size: 15px; margin-bottom: 10px; transition: color 0.2s ease; } .dd-footer-col a.dd-footer-link:hover { color: rgb(var(--gold)); } .dd-footer-social { display: flex; gap: 10px; } .dd-footer-ico { width: 44px; height: 44px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, 0.2); display: inline-flex; align-items: center; justify-content: center; transition: transform 0.25s var(--ease-out), background-color 0.25s ease, box-shadow 0.25s ease; } .dd-footer-ico svg { width: 18px; height: 18px; } .dd-footer-ico:hover { transform: scale(1.1) translateY(-1px); background-color: rgba(var(--gold), 0.12); box-shadow: 0 0 0 1px rgba(var(--gold), 0.45); } .dd-footer-social .dd-skillest { width: 44px; height: 44px; border-radius: 11px; } .dd-footer-social .dd-skillest svg { width: 24px; height: 24px; } .dd-footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 13px; color: rgba(255, 255, 255, 0.4); } .dd-footer-bottom p { margin: 0; } .dd-footer-bottom a { color: rgba(255, 255, 255, 0.6); text-decoration: none; transition: color 0.2s ease; } .dd-footer-bottom a:hover { color: rgb(var(--gold)); } @media (max-width: 720px) { .dd-footer { padding: 56px 20px 28px; } .dd-footer-cols { gap: 40px; } } /* ---- Accessibility: honour reduced-motion. enhance.js also opts out entirely, this is the belt-and-braces CSS guarantee. ---- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } html.motion [data-reveal] { opacity: 1 !important; } a, img, .dd-skillest, .dd-submit, .dd-field input, .dd-field textarea { transition-duration: 0.01ms !important; } }